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="fletter64128">What time is it?</p>
p.fletter64128: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="fline81730">first line by rendering, not by physical line break.</p>
p.fline81730:first-line {color:red}

Reference

Selectors#x50

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.