HTML and CSS Reference
In-Depth Information
p::first-letter {
font-size: 24px;
float: left;
}
Bear in mind that if you use both
::first-line
and
::first-letter
in
the same element, the
::first-letter
properties will override the same
properties inherited from
::first-line.
This element can sometimes produce unexpected results, if you're not
aware of the W3C specs: it's actually the CSS selector with the longest spec!
So it's a good idea to read them carefully if you're planning on using it (as it
is for all the other selectors).
::BEFORE AND ::AFTER
The
::before
and
::after
pseudo-elements are used to insert content
before or after an element's content, purely via CSS.
These elements will inherit many of the properties of the elements that they
are being attached to.
Image you want to the words “Graphic number x:” before the descriptions of
graphs and charts on your page. You could achieve this without having to
write the words “Graphic number”, or the number itself yourself:
.post {
counter-reset: image;
}
p.description::before {
content: "Figure number " counter(image) ": ";
counter-increment: image;
}
What just happened here?
