Spans VS :before and :after pseudo elements; when should I use which?

[yaharga]

I already asked this on Stack but it was closed due to it being primarily based on opinion. Thought I’d get some answers here.

Often I find myself in a situation where I can use either. I know it’s always easier to use pseudo elements, but what if I feel that a span still does the job better, and it makes me feel more secure that it’ll work as expected, since I’m used to using it and I understand what I can get from it; it’s reliable, even though browser compatibility came a way with us being in 2016. Am I only supposed to use pseudo elements when I can’t edit the HTML directly?

Usually I think of the following when making my decision:

• Semantics: which would make more sense?
• Separating and organizing the code or logic.
• Compatibility (sometimes).

Here are some things I wonder about, as well, though I’m clueless about the answers:

• Which one is better for performance?
• What situations and scenarios are perfect for one and not the other?

Other than that, I want to know the advantages and disadvantages of each.

[Atelierbram]

In the case of CSS-animations, and you had to choose between the two, I would ultimately go for using a span, for historically better browser support. Can also insert the span with javaScript when wanting to keep the HTML-markup clean and semantic.

[josh]

Use spans if they are wrapping around content, if there’s no content, use pseudo-elements.

[Author]

Posts