Can i add text to a .css <div>

[dreamwest]

Can i add text to a .css <div>

 

.arrowlistmenu .openheader{ 
background:url(/images/close.png) no-repeat 8px 2px;
}

 

I want to add "Show This" next to the image

 

Im a bit lost on how to do this...

[ifubad]

You can put the text in a <span> inside the <div>, and position or margin the <span> to whatever side of the background image

 

<div><span>Text</span></div>

[TheFilmGod]

Yes, you can.

content: '.....content goes here ....';

[dreamwest]

Yes, you can.

content: '.....content goes here ....';

 

Doesnt work

[likethegoddess]

Hmm. I think you'll want to add your text to your HTML rather than your CSS. Since you've specified your image as a background image in your CSS, you might find it easier to create a neighboring div to house your text.

 

Hope this helps.

 

Diana

[Mchl]

I've never actually used it, but AFAIK content: works with :after and :before

 

.arrowlistmenu .openheader{
background:url(/images/close.png) no-repeat 8px 2px;
}

.arrowlistmenu:after .openheader:after{
content: 'content is here';
}

 

 

[dreamwest]

I've never actually used it, but AFAIK content: works with :after and :before

 

.arrowlistmenu .openheader{
background:url(/images/close.png) no-repeat 8px 2px;
}

.arrowlistmenu:after .openheader:after{
content: 'content is here';
}

 

 

 

This works!

 

Thanks

[jcombs_31]

Why would you want to do it that way?

[haku]

I believe that :after and :before are not standard across all browsers, so you may want to check the major ones before going with this, unless the content that is added is not essential content.

[stublackett]

As its been said, Why would you want to do this?

 

If your using an image just put ALT Tags on it or as someone suggested put another DIV in there with your text included in it

 

#div { position : relative; top : 8px; left:10px; }
#div-in { position : relative; top : 5px; left: 5px; }

 

That would sit a DIV inside a DIV for you

 

[dreamwest]

Why would you want to do it that way?

 

I can use  a.hover to change content without using javascript

 

 

.arrowlistmenu .openheader{
background:url(/images/close.png) no-repeat 8px 2px;
}

.arrowlistmenu:after a:hover{
background:url(/images/open.png) no-repeat 8px 2px;
}