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>
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? :)
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.
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]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With