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:
xxxxxxxxxx1
p::first-letter {2
font-size: 1.2rem;3
}The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of the specified element.
In this example, we present how to use ::first-letter pseudo element with different CSS selectors (element, class, id) to style empty elements.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div::first-letter {7
font-size: 1.5rem;8
font-weight: bold;9
color: green;10
}11
12
.class-name::first-letter {13
font-size: 1.5rem;14
font-weight: bold;15
color: orange;16
}17
18
#element-id::first-letter {19
font-size: 1.5rem;20
font-weight: bold;21
color: blue;22
}23
24
</style>25
</head>26
<body>27
<div>First letter styled using element selector.</div>28
<div class="class-name">First letter styled using class selector.</div>29
<div id="element-id">First letter styled using id selector.</div>30
</body>31
</html>
