This keyword let you style a specific part of the selected element(s). It can be used to style the first letter, or line, of an element. It can also be used to insert content before or after the content of an element
You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
Pseudo-classes vs. Pseudo-elements
Pseudo-classes : the ":" pseudo allow the selection of elements based on state information that is not contained in the document tree.
example: "a:visited" will match all <a> elements that have been visited by the user.
Pseudo-elements : The "::" pseudo represent entities that are not included in HTML.
example: "p::first-line" will match the first line of all <p> elements.
The double colon replaced the single-colon notation for pseudo-elements in CSS3.
This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements. The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1. For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.
Pseudo-elements and CSS classes: pseudo-elements can be combined with CSS classes.
Multiple pseudo-elements: several pseudo-elements can also be combined.
example: p::first-line {color: #0000ff; font-variant: small-caps;} p::first-letter {color: #ff0000; font-size: xx-large;} explanation: in the example, the first letter of a paragraph will be blue, in an xx-large font size. The rest of the first line will be blue, and in small-caps.
::after (:after) pseudo-element creates a pseudo-element that is the last child of the selected element.
It is often used to add cosmetic content to an element with the content property. It is inline by default and inserts something after the content of each selected element(s).
Syntax: selector::after{/* . . . */}
Use the "content property" to specify the content to insert. The value for content can be:
a string: {content: "a string";} : special characters need to be specially encoded as a unicode entity.
an image: {content: url(/path/to/image.jpg);} : the image is inserted at its exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.
nothing: {content: "";} : useful for clearfix and inserting images as background-images (set width and height, and can even resize with background-size).
a counter: {content: counter(li);} : useful for styling lists (but we also have ::marker for that).
examples
Look at the orange box after this text.
code;
<div>
<span class="ribbon">Look at the orange box after this text. </span>
</div>
<style>
.ribbon {background-color: #5bc8f7;}
.ribbon::after {content: "This is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted;}
</style>
::backdrop pseudo-element is a box the size of the viewport which is rendered immediately beneath any element
The box is presented in full-screen mode. in the top layer. This includes:
elements which have been placed in fullscreen mode using the Fullscreen API "Element.requestFullscreen() method".
<dialog> elements that have been shown in the top layer via a "HTMLDialogElement.showModal()" call.
Popover elements that have been shown in the top layer via a "HTMLElement.showPopover()"" call.
Syntax: selector::backdrop{/*. . .*/ }
examples
When the image goes to fullscreen mode it doesn't cover the entire viewport therefore the backdrop is visible and it can be styled:
code:
<div>
<div class="Div-A">
<p>When the image goes to fullscreen mode it doesn't cover the entire viewport therefore the backdrop
is visible and it can be styled:</p>
<button id="btn-A">Toggle Fullscreen</button>
<img id="pic-A" src="1.jpg" alt="">
</div>
</div>
<style>
#pic-A {display: block; max-width: 60%; margin: 2rem 0;}
#pic-A::backdrop { background: conic-gradient(red, yellow, black, green, blue, pink, orange);
animation: move 5s infinite linear paused both;}
#btn-A{cursor: pointer;}
#pic-A:hover::backdrop {animation-play-state: running;}
@keyframes move {
50% {transform: scale(0.8);}
}
.Div-A { max-width: 60vw; margin: 0 auto; padding: 2vw;}
@supports not selector(::backdrop) {
body::before {box-sizing: border-box; content: "⚠️ Your browser doesn't support ::backdrop";
display: block; max-width: 60vw; margin: auto; color: #f44336; font-weight: bold; padding: 2vw 2vw 0;}
}
</style>
<script>
let fullscreen = document.querySelector("#pic-A");
let button = document.querySelector("#btn-A");
button.addEventListener("click", () => {
if (!document.fullscreenElement) {
fullscreen?.requestFullscreen();
} else {
document.exitFullscreen();
}
});
</script>
::before (:before) pseudo-element inserts something "before" the content of each selected element(s).
Syntax: selector::before{/* . . . */ }
Use the "content property" to specify the content to insert. The value for content can be:
Use the "content property" to specify the content to insert. The value for content can be:
a string: {content: "a string";} : special characters need to be specially encoded as a unicode entity.
an image: {content: url(/path/to/image.jpg);} : the image is inserted at its exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.
nothing: {content: "";} : useful for clearfix and inserting images as background-images (set width and height, and can even resize with background-size).
a counter: {content: counter(li);} : useful for styling lists (but we also have ::marker for that).
examples
Look at the orange box before this text.
code;
<div>
<span class="ribbon-B">Look at the orange box before this text. </span>
</div>
<style>
.ribbon-B {background-color: #5bc8f7;}
.ribbon-B::before {content: "This is a fancy orange box."; background-color: #ffba10;
border-color: black; border-style: dotted;}
</style>
::cue pseudo-element matches WebVTT cues within a selected element.
This can be used to style captions and other cues in media with VTT tracks.
The properties are applied to the entire set of cues as if they were a single unit. The only exception is that background and its longhand properties apply to each cue individually, to avoid creating boxes and obscuring unexpectedly large areas of the media.
Syntax: ::cue | ::cue(<selector>){/* . . . */}
examples
code;
<div>
<video controlssrc="/media/.../....mp4">
<track default kind="captions" srclang="en" src="/media/...../....vtt">
Sorry, your browser doesn't support embedded videos.
<video>
</div>
<style>
video { width: 25vw;}
video::cue {font-size: 1vw; color: yellow;}
</style>
::cue-region pseudo-element matches WebVTT cues within a selected element.
This can be used to style captions and other cues in media with VTT tracks.
::first-letter (:first-letter) pseudo-element is used to add a style to the first letter of a block-level element
The pseudo-element may not be preceded by other content (such as images or inline tables)
Syntax: selector::first-letter {/*. . . */;}
The following properties can be used with ::first-letter:
all font properties, color properties, all background properties, all margin properties, all padding properties, all border properties (i.e. shorthands and longhands), text-decoration, text-shadow, text-transform, text-decoration-color, text-decoration-line, text-decoration-style, letter-spacing, word-spacing, line-height, box-shadow, vertical-align (only if float is 'none'), float, clear
The ::first-letter pseudo-element can only be used with block-level elements.
examples
My heading
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
code;
<div>
<h4>My heading</h4>
<p id="text-B">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est.
</p>
<p id="text-C">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</p>
</div>
<style>
p#text-B {width: 40vw; line-height: 1.5;}
h4 + #text-B::first-letter {color: white;background-color: black; border-radius: 0.2vw;
box-shadow: 0.3vw 0.3vw 0 red;font-size: 250%; padding: 0.6vw 0.3vw;
margin-right: 0.6vw; float: left;}
</style>
::first-line (:first-line) pseudo-element is used to add a special style to the first line of a text (i.e. block-level element).
Syntax: selector::first-line {/* . . . */;}
The following properties can be used with ::first-letter:
all font-related properties, color properties, all background-related properties, word-spacing, line-spacing, text-decoration, vertical-align, text-transform, line-height, clear
The ::first-line pseudo-element can only be used with block-level elements.
examples
Styles will only be applied to the first line of this paragraph. After that,
all text will be styled like normal. See what I mean?
The first line of this text will not receive special styling because it is not
a block-level element.
code;
<div>
<p id="text-D">
Styles will only be applied to the first line of this paragraph. After that,
all text will be styled like normal. See what I mean?
</p>
<span id="text-E">
The first line of this text will not receive special styling because it is not
a block-level element.
</span>
</div>
<style>
#text-D::first-line {color: blue; text-transform: uppercase;}
#text-E{margin-left: 2vw;}
#text-E::first-line {color: blue; text-transform: uppercase;}
</style>
::grammar-error pseudo-element represents a text segment, which the user agent has flagged as grammatically incorrect.
This is an experimental technology. No browser support
Only a small subset of CSS properties can be used in a rule with ::grammar-error in its selector:
color, background-color, cursor, caret-color, outline and its longhands, text-decoration and its associated properties, text-emphasis-color, text-shadow
Syntax: selector::grammar-error {/* . . . */;}
examples
My friends is coming to the party tonight.
code;
<div>
<p id="text-F">My friends is coming to the party tonight.</p>
</div>
<style>
#text-F::grammar-error {text-decoration: underline red; color: red;}
</style>
::marker pseudo-element selects the marker box of a list item, which typically contains a bullet or number.
It works on any element or pseudo-element set to "display: list-item", such as the <li> and <summary> elements.
Syntax: selector::marker {/* . . . */;}
Only certain CSS properties can be used in a rule with ::marker as a selector:
all font properties, the white-space property, color, text-combine-upright, unicode-bidi, direction properties, the content property, all animation and transition properties
The specification states that additional CSS properties may be supported in future.
::placeholder pseudo-element selects form elements with placeholder text, and let you style the placeholder text.
Syntax: selector::placeholder{/* . . . */}
The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field. The default color of the placeholder text is light grey in most browsers. Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector.
::selection pseudo-element matches the portion of an element that is selected by a user.
Syntax: selector::selection{/* . . . */;}
The ::selection pseudo-element matches the portion of an element that is selected by a user.
The following CSS properties can be applied to ::selection: color, background, cursor, and outline.
examples
This text has special styles when you highlight it.
Also try selecting text in this paragraph.
code;
<div>
<p id="item-VV">This text has special styles when you highlight it.</p>
<p id="item-WW">Also try selecting text in this paragraph.</p>
</div>
<style>
/* Make selected text gold on a red background */
#item-VV::selection{ color: white; background-color: darkblue;}
#item-WW::selection {color: gold; background-color: red;}
</style>
::slotted pseudo-element represents any element that has been placed into a slot inside an HTML template.
This only works when used inside CSS placed within a shadow DOM. Note also that this pseudo-element won't select a text node placed into a slot; it only targets actual elements.
::spelling-error pseudo-element represents a text segment which the user agent has flagged as incorrectly spelled.
Only a small subset of CSS properties can be used in a rule with ::spelling-error in its selector:
color, background-color, cursor, caret-color, outline and its longhands, text-decoration and its associated properties, text-emphasis-color, text-shadow
Syntax: ::spelling-error{/* . . . */;}
This is an experimental technology. No browser support
::target-text pseudo-element represents the text that has been scrolled to if the browser supports scroll-to-text fragments.
It allows authors to choose how to highlight that section of text.
