CSS: Match first-letter and first-line

By Xah Lee. Date: . Last updated: .

This page is a tutorial of using CSS first-letter to make the first letter of a paragraph stand out. Also, first-line.

CSS 「:first-letter」 Pseudo Element Selector

Here's a example:

What time is it?

Here's the code:

<p class="fc_85743">What time is it?</p>
p.fc_85743:first-letter {font-size:3em}

em is the font size. [see CSS: Units]

See also: What's a Letter in CSS's first-letter Pseudo-element?.

CSS 「:first-line」 Pseudo Element Selector

Here's a :first-line example:

first line by rendering, not by physical line break.

Here's the code:

<p class="fl_37792">first line by rendering, not by physical line break.</p>
p.fl_37792:first-line {color:red}

Reference

Selectors#x50

Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth