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

Home Forums CSS *:before, *:after { content: ‘ ‘ }

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

    Tell me something: how often do you actually use the ‘content’ property to add content, versus how often you use pseudo-elements purely for aesthetic purposes?

    I’ve been thinking that this would be a good addition to most CSS resets. This way you would only need to declare a value for “content” if you actually…well, _need_ to.

    *:before, *:after {
    content: ‘ ‘;

    Any thoughts?


    [*] actually takes up a lot of resources when the document is loaded

    You’d have to type


    anyway…so another dozen characters is such a big deal.

    In any case, I don’t use pseudo elements to add content…that’s what HTML is for.

    Andy Howells

    I use before/after from time to time to add custom characters to elements. Usually it will be on a list-item, for example a check mark like below;

    li:before { content: “✔ “; }

    90% of the time I’m using before/after to do stlying that requires a fake element. and thus have empty “content”. However as @paulie_D said, don’t use the universal selector, that way madness lies.


    In the format that @AndyHowells has given it’s effectively ‘styling’ rather than adding content. and that’s more than acceptable.


    I mostly use :before and :after for icon fonts or more complex styling. But it can also be used to add content that isn’t really important to the meaning of the document. For example, at a certain screen size, I have the date format change. I use an :after element to add a comma after the “day” span. Doing this without pseudo elements would be stupidly complex.

    Anyway, the * selector may take up some resources, but I already use it to declare box-sizing: border-box on everything. And reset the margins and padding. I’m not too concerned over a few milliseconds of extra rendering time.

    Andy Howells

    You should be concerned, say we have 100 elements on the page.

    Using the universal select for box-sizing isn’t creating anything, it’s just adjusting the properties of all elements. So for example, adjusting 100 elements on a page.

    By applying before/after universally you’re effectively adding another 200 elements (all be them pseudo) to the page.


    Ah, that makes sense.

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