CSS ::first-letter pseudo element

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>
refresh

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>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments