::before and ::after are CSS pseudo-elements which allow stylesheet to specify the content.

Apart from html usually specifying the content, When do I think of using these pseudo-elements?

closed as too broad by user40980, durron597, GlenH7, user22815, gnat Oct 9 '15 at 7:16

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • they are helpful when you want to hack in some line or float breaks – Ewan Oct 8 '15 at 12:25

The popular clear-fix solution uses a pseudo element to clear the elements' floats.

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;

Also, there is wikipedia-like external links. One can auto-matically target links pointing to other domains, or that target _blank and add a little icon after it to let the user know...

There are a multitude of ingenious ways to use those pseudo elements. In your everyday life, you will very rarely encounter the need to use those elements, but it is very nice to know they exist for that exact time when you need them.


I used it myself to effectively hide my e-mail adress on my website, since pseudo-elements cannot be target by JS, and do not appear in the HTML source, I thought it'd be nice to make sure crawlers wouldn't get to it.

Not the answer you're looking for? Browse other questions tagged or ask your own question.