Table of Contents
Pseudo-elements selectors
It select and style a part of an element. They are two types:
- First-line pseudo-element
- First-letter pseudo-element
First-line pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of a text like
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p::first-line{
color: red;
font-variant: small-caps;
background-color: yellow;
}
</style>
</head>
<body>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.
You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
</p>
</body>
</html>First-letter pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text like
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p::first-letter{
font-size: 100px;
color: red;
font-variant: small-caps;
background-color: yellow;
}
</style>
</head>
<body>
<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.
You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
</p>
</body>
</html>