search ]

Styling the First Letter with CSS ::first-letter Property

::first-letter is another useful pseudo-element that allows you to style the first letter of text within any element without the need to modify the HTML or add any specific tags like span. The method works similarly to a scenario in which you wrapped the first letter with a specific tag.

The traditional and old way of styling the first letter looks like this:

HTML

<p>
    <span class="first-letter-style">T</span>he first letter is big & orange.
</p>

CSS

.first-letter-style{
    font-size: 30px;
    color: #c54088;
}

And the result will look like the following style:

The first letter is big & orange.


However, a simpler way to achieve this is by using the same pseudo-element called ::first-letter as shown in the following example:

HTML

<p class="first-letter-pseudo">
     האות הראשונה היא גדולה וכתומה.
</p>

CSS

.first-letter-pseudo::first-letter {
    font-size: 30px;
    color: #c54088;
}

And the result will be the same as the first example:

The first letter is big & orange.

Browser Support

That’s it. If you’re interested in CSS, take a look at the new selectors coming our way in “CSS4” – and there’s a good reason why I’m mentioning this in parentheses… 🙂

Roee Yossef
Roee Yossef

I develop websites & custom WordPress themes by design. I love typography, colors & everything between, and aim to provide high performance, seo optimized websites with a clean & semantic code.

0 Comments...

Leave a Comment

Up!
Blog