:first-line and :first-letter

Back to the index.

The pseudo-classes :first-line and first-letter are for giving special styles to the first line and letter of an HTML element.

The first line is determined by the browser as the real first line of the paragraph on the screen. So if you resize your browser window the first line will become longer or shorter. The styles will be applied to this longer or shorter first line.


p:first-letter {text-decoration: underline;}
p:first-line {color: #CB000F;}

Dynamic content

This is a test paragraph. You can insert extra text at its start; the :first-line and :first-letter styles should be updated to accomodate this new text.