HTML and CSS Reference
In-Depth Information
First, we tell the HTML to create the “image” counter. We could have added
this property to the body of the page, for example. Also, we can call this
counter whatever name we want to, as long as we always reference it by the
same name: try it for yourself!
Then we say that we want to add, before every paragraph with the class
“description”, this piece of content: “Figure number ” — notice that only what
we wrote between quotes will be created on the page, so we need to add
the spaces as well!
After that, we have counter(image) : this will pick up the property we've
already defined in the .post selector. It will by default start with the number
one (1).
The next property is there so that the counter knows that for each
p.description , it needs to increment the image counter by 1 ( counter-
increment: image ).
It's not as complicated as it looks, and it can be quite useful.
The ::before and ::after pseudo-elements are often only used with the
content property, to add small sentences or typographical elements, but
here it's shown how we can use it in a more powerful way in conjunction
with the counter-reset and counter-increment properties.
Fun fact: the ::first-line and ::first-letter pseudo-elements will
match the content added by the ::before pseudo-element, if present.
Notes on browser support
These pseudo-elements are supported by IE8 (not IE7 or 6), if the single
colon format is used (for example, :first-letter, not ::first-
letter ). All the other major browsers support these selectors.
Search WWH ::




Custom Search