Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS content property not displaying

Tags:

css

I am new to CSS and I'm following a book example:

Iv'e copied the following from the book and saved it as HTML. all the css properties seem to work except the "content" property which does not display.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>
like image 378
Greycrow Avatar asked Jul 18 '11 00:07

Greycrow


3 Answers

content is used with :before or :after like so:

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

Regardless, I've only used content for special cases (to clear floated elements, for example). I've never actually used this to insert content. You generally want to separate content and presentation anyway, so I think this is a bad idea. Which book are you reading? :)

like image 99
pixelfreak Avatar answered Nov 03 '22 10:11

pixelfreak


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

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

like image 17
SLaks Avatar answered Nov 03 '22 10:11

SLaks


The content property only works for :before and :after to prepend or append content to said nodes, like so:

.email-address:before {
  content : "Email address: ";
}
<ul>
  <li class="email-address">[email protected]</li>
</ul>

The output would be

• Email address: [email protected]

like image 8
AlienWebguy Avatar answered Nov 03 '22 10:11

AlienWebguy