I stumbled upon an article the other day that caught my eye. In particular - the usage of a CSS technique I had never seen before… ::first-letter.
Who knew!? I surely did not.
To the east the outflung arm of the mountains marched to a sudden end, and far lands could be
descried beyond them, wide and vague. To the south the Misty Mountains receded endlessly as far
as sight could reach. Less than a mile away, and a little below them, for they still stood high up on the west side of the dale, there lay a mere. It was long and oval, shaped like a great spear-head thrust deep into the northern glen; but its southern end was beyond the shadows under the sunlit sky. Yet its waters were dark: a deep blue like clear evening sky seen from a lamp-lit room. Its face was still and unruffled. About it lay a smooth sward, shelving down on all sides to its bare unbroken rim.
The pseudo selector is relatively straightforward, though you can find yourself in a world of hurt if you start trying to select the first paragraph element in a container. It’s best to try and pinpoint your first paragraph by a unique classname.
Below is how to select the first paragraph tag in a container and act on the first letter:
You’re safe using the double colon :: as the selector if you are working in modern browsers. But the Mozilla docs say if you need IE8 or earlier support, use the single colon.