Two pseudo-elements style the opening of a text block.
::first-letter
Targets the first letter of the first line of a block. The classic use is a drop cap.
index.html
HTML
<style>
.story::first-letter {
float: left;
font-size: 3.2em;
line-height: 0.9;
padding: 4px 8px 0 0;
color: #d94a00;
font-weight: bold;
}
</style>
<p class="story">Every morning the shop opened a little later than the sign said, and nobody on Juniper Street minded. The bread arrived at eight and the books at nine.</p>float: left lets the following text wrap around the large letter.
::first-line
Targets the first line as it currently wraps. Resize the page and the highlighted portion changes with it.
index.html
HTML
<style>
.lead::first-line { font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; color: #1a5276; }
</style>
<p class="lead">The opening line of this paragraph is styled, and only that line. The remaining lines look normal, however the paragraph wraps on your screen.</p>Limits
These two only allow certain properties: fonts, color, background, text properties, and for ::first-letter also margin, padding, border and float. You cannot apply layout properties like display or position.
They also only work on block containers. They do nothing on an inline span.
lightbulb
Make sure it is worth it
A drop cap is nice in long editorial text. In a short paragraph, or on a narrow phone, it can look odd. Test at small widths.