CSS Dropcaps Using :first-line and :first-letter

Some CSS selectors or properties may not be commonly seen in everyday web design, yet they’ve been around since the CSS1 era. These include the :first-line and :first-letter pseudo-elements.

How to Utilize CSS Pseudo-elements

These pseudo-elements function similarly to their counterparts, :before and :after, and are quite straightforward to use. The :first-letter pseudo-element targets the first letter or character of a selected element, commonly used for typographical effects like drop caps. Here’s how to implement it:

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

This code transforms the first letter as shown below.

It’s important to note that this effect applies only when the first character isn’t preceded by another element, such as an image. Moreover, when there are multiple instances of the targeted element in sequence, they will all exhibit the effect.

Regarding the :first-line pseudo-element, it targets the first line of a selected element. The example below demonstrates how to bold the first line of a paragraph.

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

This code affects all first lines in the paragraphs on the page, just like the :first-letter code did.

In practical applications, when you want to apply a drop cap or alter the first line only in the first paragraph, specificity is key. This can be achieved by adding an extra class or using these pseudo-elements in conjunction with the :first-child or :first-of-type selectors, as shown below.

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

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

This approach ensures only the first paragraph is affected.

Implementing Pseudo-Elements for Enhanced Paragraph Design

Now, let’s explore how to use pseudo-elements to create a more appealing paragraph design. First, we’ll select a unique font for our drop cap. I recommend Hominis by Paul Lloyd for this purpose. Next, we’ll add this font to our stylesheet like so:

@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;
}

Then, we define the default font family for paragraphs to ensure consistency throughout.

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

In this example, we’ll use the :first-child selector to specifically style the first paragraph, making it stand out with decorative enhancements:

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;
}

Next, let’s enhance the initial letter using the :first-letter pseudo-element by increasing its font size and applying a distinct font family to it:

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;
}

To further distinguish the first paragraph, we’ll bold the first line using :first-line:

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

Finally, we aim to add a creative touch to the first paragraph by introducing a decorative paperclip with the :after pseudo-element.

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;
}

This completes our coding efforts, resulting in a significantly improved paragraph appearance:

Explore the live demo and download the source from the links provided below:

View demo Download source

Final Thoughts

As mentioned at the beginning, the pseudo-elements :first-letter and :first-line have been part of CSS since CSS1, making them compatible with even early versions of Internet Explorer, such as IE8.

Despite their long-standing presence, these features are not widely used today. It’s our hope that this tutorial inspires you to experiment with these CSS capabilities on your own websites.