HTML and CSS Reference
In-Depth Information
PSEUDO-ELEMENTS AREN'T CRITICAL
Fortunately, a lack of pseudo-elements will not cause huge usability issues.
For the most part, pseudo-elements are generally decorative (or helper-like)
content that will not cause problems in unsupported browsers. So, even if
your audience has high IE numbers, you can still use them to some degree.
A Couple Of Reminders
As mentioned, pseudo-element content does not appear in the DOM. These
elements are not real elements. As such, they are not accessible to most
assistive devices. So, never use pseudo-elements to generate content that
is critical to the usability or accessibility of your pages.
Another thing to keep in mind is that developer tools such as Firebug do not
show the content generated by pseudo-elements. So, if overused, pseudo-
elements could cause maintainability headaches and make debugging a
much slower process.
(
Update:
you can use Chrome's developer tools to view the styles
associated with a pseudo-element, but the element will not appear in the
DOM. Also, Firebug is adding pseudo-element support in version 1.8.)
That covers all of the concepts you need in order to create something
practical with this technique. In the meantime, for further reading on CSS
pseudo-elements, be sure to check out some of the articles that we've
linked to in this piece.
