Treehouse: Grow your CSS skills. Land your dream job.

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

  • # February 22, 2013 at 12:41 pm

    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?

    # February 22, 2013 at 2:10 pm

    [*] 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.

    # February 22, 2013 at 2:19 pm

    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.

    # February 22, 2013 at 2:22 pm

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

    # February 22, 2013 at 3:35 pm

    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.

    # February 22, 2013 at 3:39 pm

    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.

    # February 22, 2013 at 4:53 pm

    Ah, that makes sense.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.