When to use CSS pseudo-elements? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 5 years ago.

Improve this question

::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?

Answer 1

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.

Edit:

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.