Main Menu

Paragraph Dropcap with CSS’s :first-line and :first-letter Elements

There are a few CSS selectors or properties that I think are rarely used in the wild, but they actually have been in existence since the days of CSS1; some them are including the :first-line and :first-letterpesudo-elements.

How to use?

These pseudo-elements basically work similar to their siblings – :before and :after – and I think they are also quite straightforward. The :first-letter will target the first letter or character of a selected element, this pseudo-element is commonly used to create a typographical effect like a drop cap. Here is how it’s done.

p:first-letter {
font-size: 50px;
}

This code results in the following presentation.

A few things should be noted, however, this effect will only apply when the first character is not preceded by another element, for instance, an image. Additionally, when we have some of the same targeted elements in a row, all of them will also be affected.

Further, in terms of the :first-line, this pseudo-element will target the first line of targeted element, this example below shows how we bold the first line of paragraph.

p:first-line {
font-weight: bold;
}

Like the previouss code of :first-letter, this will also affect all of the first lines in paragraph elements there are in the page.

So, in real cases, when we generally want to add drop cap or alter the first line only on the first paragraph we need to be more specific – either by adding an extra class attribute or applying these pseudo-elements along with :first-child or :first-of-type selector, like so.

Pseudo-Elements at Work

All right, let us now try designing a better look of a paragraph by utilizing pseudo-elements. But before we begin we need a special font for our drop cap and here is my choice: Hominis by Paul Lloyd. Then we define a new font family in the stylesheet, as follows.

Final Thought

As we mentioned earlier in this post, these pseudo-elements, specifically the :first-letter and :first-line has been included since CSS1, hence they are also supported even in Internet Explorer 8 earlier.

Yet, as far as I know, they are not so largely implemented in the wild. So, we hope that this tutorial could in some way inspire you to try these CSS features on your website.