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.
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.
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.
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.
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.
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.
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;
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.
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.