Pseudo Elements
Pseudo elements suck on to selectors much like pseudo classes, taking the form of selector:pseudoelement { property: value; }
. There are four of the suckers.
First Letters and First Lines
The first-letter
pseudo element applies to the first letter inside a box and first-line
to the top-most displayed line in a box.
As an example, you could create drop caps and a bold first-line for paragraphs with something like this:
p {
font-size: 12px;
}
p:first-letter {
font-size: 24px;
float: left;
}
p:first-line {
font-weight: bold;
}
Before and After Content
The before
and after
pseudo elements are used in conjunction with the content
property to place content either side of a box without touching the HTML.
The value of the content
property can be open-quote
, close-quote
, any string enclosed in quotation marks, or any image, using url(imagename)
.
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW! ";
}
p:before {
content: url(images/jam.jpg);
}
The content
property effectively creates another box to play with so you can also add styles to the “presentational content”:
li:before {
content: "POW! ";
background: red;
color: #fc0;
}