Jun 08, 2015 - 0 Comments - Basics, CSS, HTML -

Before and After

I was a bit unsure about the css selectors before and after when they emerged. I couldn’t quite see how they’d come in useful. Now though I employ them in a limited way in almost every project.

There are two situations where I find they come in most handy. The first is when you need to insert a simple graphical (pseudo) element somewhere about a regular page element. Now it might sound obvious but it’s a lot easier and less bother to put such items directly into the CSS, without the need for any HTML amendments. A good example is on the website Innermedia  built for Mode Print Solutions, which uses pseudo elements to apply little triangles above and below key elements. These important design touches could have been a pain to add to the HTML, but :before and :after served the job well.

The second, more significant use is to remove at least some of the clearfix hack from your HTML document. Clearfix is a bit of a bugbear of mine, as I’m confident it’s used about 99% more than required, laughably overused on poorly built sites, and can usually be replaced with overflow:hidden which counter-intuitively clears floats on a container.

Anyway it’s a simple method and keeps your clearfix clean:

.container:after {
  content:"";
  display:table;
  clear:both;
}

Further interesting, if not always useful, uses of the :before and :after pseudo elements can be found at css-tricks.com/pseudo-element-roundup/.  And as an aside, it’s interesting to see how the separation of style and content, a popular mantra, can be seen to fail usefully from time to time. Similarly MVC  (which means different things on different platforms) is vital 95% of the time, but puts up practical hurdles which demand circumvention for the other 5%. That’s how you end up with XSLT (ugh!) being superseded with razor.