What’s the point of the :before and :after pseudo-element selectors in CSS?

Question

I have used CSS pseudo-element selectors like many others, mainly just to say I've used them.

But I am racking my brain and struggling to come up with a reason for their place alongside markup.

Take the following example:

<p>Hello</p>

p::after {
   content: "*";
}

What is the advantage of using this over using <span> tags?

Am I missing the point of ::before and ::after? Is there some rock solid reason for using them over pre-existing semantic markup?

Answer 1

The CSS2.1 spec says this about generated content:

In some cases, authors may want user agents to render content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to list the numbers explicitly, he or she wants the user agent to generate them automatically. Similarly, authors may want the user agent to insert the word "Figure" before the caption of a figure, or "Chapter 7" before the seventh chapter title. For audio or braille in particular, user agents should be able to insert these strings.

Basically the purpose is to minimize pollution of the content structure by "content" that is otherwise more suited as presentational elements, or better to be automated.

Answer 2

If you're talking about :before and :after: They're used as presentational elements for cases where adding more elements into the actual document would be mixing structure with appearance. A few cases I've seen:

• Bullets in bulleted lists
• Quotes around q elements
• Stylish shadows
• Decorations and the beginning or end of text

Answer 3

These particular pseudo-elements are designed to add “content” that’s actually just a visual aid.

The prime example is adding quote marks around the <q> element, which Firefox does using these selectors in its default stylesheet. Some people also use them to clear floats.

You shouldn’t use them for actual content, despite the name of the CSS content property, as non-visual user-agents (i.e. screen readers) should ignore them.

I’ve never come up with much use for them, although I did once use them to add little Unicode icons to hovered links on a personal site — like you, pretty much just to say I’d used them.

Answer 4

Honestly, the only worthwhile useage is to force elements to have the correct size in the dom. Use this code for example:

<div class="container">
    <div>this div is floated left</div>
    <div>this div is floated left</div>
</div>

Typically you would have to specify an exact or min height for the .container div. if you were to apply ":after" with some very simple css, any background you applied to the .container would actually show up (in almost every browser) properly, with few to no shims.

.container:after{
    content:'.';
    height:0;
    line-height:0;
    display:block;
    float:left;
    visibility:hidden;
}

Now try that example, applying a background color or image, and you'll see that the .container div always has the appropriate height (which would be the total combined height of the inner contents) even if all the inner html is floated (as is the case in most ul/li css buttons).

I also use an after on every div that I wrap all my content in per html page. This is due to the possibility that all of the content on a given page could be floated, and I want to make sure that my content div always has the correct size/padding with the appropriate background.