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.
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>
The ::after selector inserts something after the content of each selected element(s). Use the content property to specify the content to insert.
Use the ::before selector to insert something before the content.
Syntax: ::after {css declarations;}
examples
My name is Emerald
I live in Paradise
code:
<style>
p.special::after { content: " - remember this"; background-color:yellow;}
</style>
<div>
<p class="spec special">My name is Emerald</p>
<p class="spec special">I live in Paradise</p>
</div>
insert special characters by using "::after" pseudo-class.
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>
The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert.
Use the ::after selector to insert something after the content.
Syntax: ::before {css declarations;}
examples
My name is Emerald
I live in Paradise
code:
<style>
p.new::before {content: "Don't forget -"; background-color: orange; color: blue; font-weight: bold;}
</style>
<div>
<p class="spec new">My name is Emerald</p>
<p class="spec new">I live in Paradise</p>
</div>
insert special characters by using "::before" pseudo-class.
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>
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>
can be used with ::first-letter
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 ::first-letter selector can only be used with block-level elements.
examples
My name is Erwin.
I live in Ieper.
My best friend is Harry.
code:
<style>
.special > p.one::first-letter {font-size: 200%; color: #8A2BE2;}
</style>
<div class="special">
<p class="spec one">My name is Erwin.</p>
<p class="spec one">I live in Ieper.</p>
<p class="spec one">My best friend is Harry.</p>
</div>
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>
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>
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 <p> 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.
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.
matches the portion of an element that is selected by a user.
Syntax: selector::selection{/* . . . */;}
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>
Only a few CSS properties can be applied to the ::selection selector
color, background, cursor, and outline.
examples
Select some text here below:
This is a paragraph.
This is some text in a div element.
code:
<style>
::selection {color: red;background: yellow;}
</style>
<div>
<h3>Select some text here below:</h3>
<p class="spec seventeen">This is a paragraph.</p>
<div style="margin-left:2vw" class="seventeen">This is some text in a div element.</div>
</div>
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.
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
