Geek Answers Handbook

CSS Content Property Does Not Display

I am new to CSS and I am following the example book:

Iv'e copied the following from the book and saved it as HTML. all css properties seem to work, except for the "content" property, which is not displayed. Thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> The content property </title> <style type='text/css' media='all'> div { content: "Hello, world!"; } </style> </head> <body> <div></div> </body> </html>
+8
css
source share
3 answers

content used with :before or :after as follows:

 div:after { content: "Hello, world!"; }

Despite this, I used only content for special cases (for example, to clear floating elements). I have never used this to insert content. Usually you want to separate content and presentation, so I think this is a bad idea. Which book are you reading?:)

+15
source share

The content property applies only to CSS pseudo-elements, such as :before and :after .

You cannot use it to set the contents of an arbitrary element.

+12
source share

The content property only works for :before and :after to add or add content to specified nodes, for example:

CSS

 .email-address:before { content: "Email address: "; }

HTML:

 <ul> <li class="email-address">myemail@gmail.com</li> </ul>

The output will be

• Email address: myemail@gmail.com

+5
source share

More articles:


All Articles