CSS Pseudo elements selectors define abstract elements in a HTML. Pseudo elements identify by "double colon" (::) with the name of pseudo element.
Pseudo elements provide a mechanisms to access element first-line, first-letter content.
CSS define ::first-line, ::first-letter, ::before and ::after pseudo element.
Syntax
You can define selector with the name of pseudo element, syntax is like
selector::pseudo-element { property:value; }
You can also define selector with "dot" (.) class name with the name of pseudo class, syntax is like
selector.class::pseudo-element { property:value; }
CSS Pseudo-element Selector
| Pseudo Class | Example | Description | CSS |
|---|---|---|---|
| ::after | p::after | Add the content of the end of <p> element | 2 |
| ::before | p::before | Add the content of the beginning of <p> element | 2 |
| ::first-letter | p::first-letter | Select the first letter of <p> element | 2 |
| ::first-line | p::first-line | Select the first line of <p> element | 2 |
| ::selection | p::selection | Select the <p> element when user select paragraph text |
Example
This example cover CSS pseudo element ::first-line, ::first-letter, ::before, ::after and ::selection.
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Element Selector</title>
<style>
p.one::after{
content: " - After word";
color: #FF0000;
}
p.one::before {
content: "Before word - ";
color: #FF0000;
}
p.two::first-letter {
font-size: 30px;
}
p.two::first-line {
color: #FF0000;
}
p::selection {
color: #00000;
background-color: #66cbff;
}
p::-moz-selection {
color: #00000;
background-color: #66cbff;
}
</style>
</head>
<body>
<p class="one">This is paragraph line.</p>
<p class="two">This example cover CSS pseudo elements like after, before, first-line, first-letter, selection.</p>
</body>
</html>
