CSS: Avoid "first-line" Pseudo-Class

Published Sat 02 May 2015 3:41 p.m.

While developing this site I came across a strange problem and it was only happening in Firefox. On the blog, on any page that lists blog posts, like the blog home page or the archive pages, the browser was not rendering transitions on the title. Everywhere else on the page, indeed the entire site, transitions were working fine. I tried everything: disabling Bootstrap, disabling the Google+ script, taking out the anchor around the title, removing the featured image, adding other transitions, etc. However, the problem persisted: no transitions were being applied to this single element. As I was reviewing the CSS for the site I noticed there was an entry for the parent element with the pseudo-class, "first-line." This was how I had originally styled the title to be larger and bold and I had forgotten about that when I applied the transition to the anchor around the title. Since the anchor was classed already I just transferred the style properties from the "first-line" entry to the anchor entry, removed the "first-line" entry, reloaded the static files and, VOILA, the transition was now working as expected. So the moral of the story: Avoid the "first-line" pseudo-class, and any that might interfere with explicitly classed elements.

Powered by Django.

Designed by Lowhrtz Consulting ©2015