CSS ::first-letter Pseudo Element
The::first-letter pseudo-element puts a style on a first letter of the first line in a block-level container. It does not select inline-level elements, such as images or inline-tables.
The::first-letter pseudo-element does not identify punctuation marks that precede or immediately follow the first letter. It also applies if the first letter is, in fact, a number.
Allowable properties¶
Here are the CSS properties that can be used with the ::first-letter pseudo-element:
Font properties: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-weight, font-size, font-size-adjust, line-height and font-family.
Background properties: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image, and background-clip.
Margin properties: margin, margin-top, margin-right, margin-bottom, margin-left.
Padding properties: padding, padding-top, padding-right, padding-bottom, padding-left.
Border properties: shorthands, border-style, border-color, border-width, border-radius, border-image, longhands.
The color property.
The text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only float: none;).
Version¶
Selectors Level 3
CSS Level 2 (Revision 1)
CSS Level 1
Syntax¶
::first-letter {
css declarations;
}Example of the::first-letter pseudo-element:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::first-letter {
font-size: 35px;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>::first-letter selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Example of the::first-letter pseudo-element with a punctuation mark and a digit:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::first-letter {
font-size: 35px;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>::first-letter selector example</h2>
<p>-Lorem ipsum is simply dummy text...</p>
<p>1Lorem ipsum is simply dummy text...</p>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji