1.2 KiB
1.2 KiB
| title |
|---|
| First-Letter |
First-Letter
The ::first-letter CSS pseudo-element styles the first letter of a slected HTML element.
General Syntax:
::first-letter
Example
/* First letter of every paragraph is set to 50px */
p::first-letter {
font-size: 50px;
}
More Examples
A great example of a practical use case is if you wanted to make make the first letter in a paragraph large or decorative (commonly known as drop caps).
<p class="drop-caps">Join a community of millions of people learning to code together. Meet coders in your city. Get experience by coding for nonprofits. Level up your career.</p>
.drop-caps::first-letter {
background: repeating-linear-gradient(45deg, #85144b4f, #85144b4f 10px, #fff 10px, #fff 20px);
border: 2px solid;
color: #85144b;
float: left;
font-family: 'Times New Roman';
font-size: 100px;
line-height: 80px;
margin-right: 10px;
padding: 4px;
}