The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #243469

    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.


    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.


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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.