The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (img, or inline tables). If an element has ::before content (and/or ::after content), First letter applies after including that content.
Example – ::first-letter
<style>
.box {width: 200px;}
div.box::first-letter {
color: red;
}
</style>
<div class="box">
This is sample text where first letter will have a different style.
<div>Example – ::first-letter with ::before
<style>
.box {width: 200px;}
div.box::first-letter {
color: red;
}
div::before {content:"Before";}
</style>
<div class="box">
This is sample text where first letter will have a different style.
<div>Related
- CSS ::first-line pseudo element
- CSS ::before and ::after examples
- CSS generated content for ::after and ::before
