Forum Moderators: not2easy

Message Too Old, No Replies

Can I append text to div contents with CSS?

Want to add ":" after field labels

         

john_k

1:58 pm on Oct 27, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The broad version of my question is: Can a style be used with a div to add text before or after the div contents?

The specific task I am trying to get done right now:
I would like to put "First Name" in the DIV tag and then use CSS to control whether or not it displays with a trailing ":". i.e. "First Name" vs "First Name:"

The reason I am looking to CSS for this functionality is because the need to show/hide the colon character is directly tied to whether or not the div style has a different background color than its container. When the color is different, then the colon is not needed because the contrast fills the role of separating the label from the field. When the background color is the same, then a colon is needed.

So, any pointers, snippets, or links to example sites would be greatly appreciated.

john_k

2:22 pm on Oct 27, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think I have figured out a way to do manage the ":" character. I will have to put the colon in its own div with a new class name. Then I can use the style sheet to set the display to inline or none.

It seems like overkill, but I don't see any other way. If anyone knows of a better way, please step forward.

Also, it would still be nice to add text via CSS.

Robin_reala

2:37 pm on Oct 27, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



label::after { content: ": "; }

As per usual this doesn't work in IE.

john_k

2:44 pm on Oct 27, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks Robin. I found that after I made my post. Unfortunately, this is for an intranet application and IE is the thing.

Also, I played with it a little and it doesn't appear to work in Firefox either. (at least the version running on the computer I am at now). Maybe it does in the newest release?

john_k

3:03 pm on Oct 27, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



oops - it does work in my old Firefox version!

Maybe it will be supported in IE10.

Guess I'll just use my hack method for now.