EN
CSS - style first letter only
3
points
In this article, we would like to show you how to style only first text letter using CSS.
Quick solution:
p::first-letter {
font-size: 1.2rem;
}
The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of the specified element.
Practical example
In this example, we present how to use ::first-letter pseudo element with different CSS selectors (element, class, id) to style empty elements.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: green;
}
.class-name::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: orange;
}
#element-id::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<div>First letter styled using element selector.</div>
<div class="class-name">First letter styled using class selector.</div>
<div id="element-id">First letter styled using id selector.</div>
</body>
</html>