p.class:first-line does not work

Question

I'm trying to use the :first-line pseudo selector but it seems not to be working, and I cannot figure out why. I've tried using ::first-line as well but to no avail. (Note, this has nothing to do with border radius).

p.intro:first-line {
  text-transform: uppercase;
}

<p class="intro">Instead of attempting to cover the full range of <abbr title="Cascading Style Sheets">CSS</abbr> selectors, I think it makes sense to begin with a subset of the most widely supported. The <a href="http://www.quirksmode.org/css/contents.html">compatibility charts compiled by Peter-Paul Koch</a> provide
  detailed support information.</p>

Answer 1

I only see this issue in Chrome. Apparently there's a bug that has not been fixed yet: https://code.google.com/p/chromium/issues/detail?id=129669

There is a workaround proposed in this SO post which says you can use https://github.com/octopi/Linify to get the effect using a jquery plugin. Essentially, use linify to select the first line and then apply the property of text-transform: uppercase to the first line.