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.