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-letter pesudo-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.

1 2 3

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.

1 2 3

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 lineonly 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.

1 2 3 4 5 6

p:first-child:first-letter {     font-size: 50px; } p:first-child:first-line {     font-weight: bold; }

There we go, the affected paragraph is now only the first one.

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.

1 2 3 4 5 6 7 8 9 10

@font-face {     font-family: 'HominisNormal';     src: url('fonts/HOMINIS-webfont.eot');     src: url('fonts/HOMINIS-webfont.eot?#iefix') format('embedded-opentype'),          url('fonts/HOMINIS-webfont.woff') format('woff'),          url('fonts/HOMINIS-webfont.ttf') format('truetype'),          url('fonts/HOMINIS-webfont.svg#HominisNormal') format('svg');     font-weight: normal;     font-style: normal; }

Next, we set the default font family for the paragraphs.

1 2 3 4 5

p {     color: #555;     font-family: 'Georgia', Times, serif;     line-height: 24px; }

In this example, we will be using the :first-child selector to target the first paragraph and apply decorative styles for it to look more prominent:

1 2 3 4 5 6 7 8

p:first-child {     padding: 30px;     border-left: 5px solid #7f7664;     background-color: #f5f4f2;     line-height: 32px;     box-shadow:  5px 5px 0px 0px rgba(127, 118, 100, 0.2);     position: relative; }

Then, we add a drop cap using :first-letter, enlarge the font size as well as assign a new the font family to it;

1 2 3 4 5 6 7 8 9 10 11 12

p:first-child:first-letter {     font-size: 72px;     float: left;     padding: 10px;     height: 64px;     font-family: 'HominisNormal';     background-color: #7F7664;     margin-right: 10px;     color: white;     border-radius: 5px;     line-height: 70px; }

We will also emphasize the first line with :first-line, like so.

1 2 3 4 5

p:first-child:first-line {     font-weight: bold;     font-size: 24px;     color: #7f7664; }

Lastly, we want to add a decorative attribute to the first paragraph with a paperclip using :after pseudo-element.

1 2 3 4 5 6 7 8 9 10

p:first-child:after {     background: url("../images/paper-clip.png") no-repeat scroll 0 0 transparent;     content: " ";     display: inline-block;     height: 100px;     position: absolute;     right: -5px;     top: -35px;     width: 100px; }

That’s all the code we need, now our paragraph should look much better;

• You can also see the live demo from the links below:

• View Demo
 
• Download Source

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.