The CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element/ elements.
Syntax:
selector:pseudo-element {
property:value;
}CSS PSEUDO-ELEMENTS:
:first-letter
:first-line
:before
:after
:selection
The CSS :first-line pseudo-element:
To add the special effect to your first line of the text use the :first-line pseudo-element.
The following example formats the first line of the text in all <p> elements:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: arial;
}
p:first-line {
color: #2a9d8f;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>To add the special effect to your first line of the text use the :first-line pseudo-element. </p>
</body>
</html>Output:
You can apply to the :first-line pseudo-element the following properties:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
The CSS :first-letter pseudo-element:
To add the special effect to your first character of the text use the :first-letter pseudo-element.
The following example formats the first letter of the text in all <p> elements:
<!DOCTYPE html>
<html>
<head>
<style>
p {font-family: arial;
}
p:first-letter {
color: #2a9d8f;
font-size: xx-large;
}
</style>
</head>
<body>
<p>To add the special effect to your first character of the text use the :first-letter pseudo-element.</p>
</body>
</html>Output:
You can apply to the :first-letter pseudo-element the following properties:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if “float” is “none”)
- text-transform
- line-height
- float
- clear
The CSS :before pseudo-element:
The CSS :before pseudo-element can be used to place the content before the content of an element:
<!DOCTYPE html>
<html>
<head>
<style>
h1:before {
content:":before content";
color: #2a9d8f;
margin-right:10px;
}
</style>
</head>
<body>
<h1>CONTENT</h1>
<p>The CSS :before pseudo-element places content before the content of an element.</p>
</body>
</html>Output:
The CSS :after pseudo-element:
The :after pseudo-element can be used to place the content after the content of an element.
<!DOCTYPE html>
<html>
<head>
<style>
h1:after {
content:":after content";
color: #2a9d8f;
margin-left:10px;
}
</style>
</head>
<body>
<h1>CONTENT</h1>
<p>The CSS :after pseudo-element places content after the content of an element.</p>
</body>
</html>Output:
The CSS :selection pseudo-element:
The :selection pseudo-element matches the portion of an element that is selected by a user.
You can apply to :selection pseudo-element the following CSS properties:
- color
- background
- cursor
- outline
The following example makes the selected text red on a yellow background:
<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Firefox */
color: #2a9d8f;
background: #e9c46a;
}
:selection {
color: #2a9d8f;
background: #e9c46a;
}
</style>
</head>
<body>
<h4>Select the text in this example:</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>Output:
Select the text in this example:
This is a paragraph.
This is another paragraph.
Enjoy coding!
Read also:
Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape
