The Pseudo element in CSS styles some specific part of an element. You can also use CSS classes with pseudo element.
For Example:
Suppose, you want to style the First letter of a Text like below –
The First Letter will have a size of 1.5em with DodgerBlue color
You can use Pseudo element ::first-letter to get the result as shown above.
Syntax of pseudo-element
selector::pseudo-element{
property1:value1;
…
…
property-n:value-n;
}
For Example:
::first-letter is recommended instead of :first-letter
List of important Pseudo Elements
- ::first-letter
- ::first-line
- ::before
- ::after
- ::cue
- ::selection
::first-letter pseudo-element
::first-letter sets a particular style to the First letter of the Text.
Syntax of ::first-letter
selector::first:letter {
property1:value1;
…
…
property-n:value-n;
}
Example of ::first-letter pseudo-element
h3:first-letter { font-family:Algerian; font-size:3em; color:DodgerBlue; }
::first-line pseudo-element
::first-line sets a particular style to the First line of the Text. This works only for block level elements.
Syntax of ::first-line
selector::first:line {
property1:value1;
…
…
property-n:value-n;
}
Example of ::first-line pseudo-element
p:first-line { text-shadow: 4px 0.9px 13px hotpink; font-size:1.5em; }
::before Pseudo-element
Suppose, you want to add an style before a particular part of an element then you can use ::before Pseudo Selector.
This is often used with content element.
Syntax of ::before
selector::before {
property1:value1;
…
…
property-n:value-n;
}
::after pseudo-element
Suppose, you want to add an style after a particular part of an element then you can use ::after Pseudo Selector.
Syntax of ::after
selector::after {
property1:value1;
…
…
property-n:value-n;
}
::selection Pseudo-element
If you want to set up an style to a part of an element only when the user selects that element, then you can use ::selection pseudo element.
Syntax of ::selection
selector::selection {
property1:value1;
…
…
property-n:value-n;
}
When you select the text from below list the color of the text will change to hotpink.
- Mango
- Grapes
- Apple
- Banana
CSS ::cue pseudo-element
WebVTT(Web Video Text Tracks Format) displays the time based tracks. These time bases tracks is mostly used in VTT files which is the equivalent of captions of a video which displayes the subtitle and content based on time frame:
For Example:
The below is an example of .VTT file
WEBVTT 00:00.890 --> 00:05.850 Hi, Welcome to TutorialBrain. 00:05.870 --> 00:14.010 Learn CSS Pseudo Element Properly 00:14.02 --> 00:15.02 Thank you.
This .VTT file uses the ::cue element.
The main purpose of .VTT file is to add captions or subtitles for a video.
In some cases, you can create a .VTT file for a video which will generate captions for your video.
Now, the CSS pseudo elements finds the WebVTT files within the selected elements and applies styles to it.
You can apply a background color, color of a text, text-shadow, line height, font details, etc using the ::cue property.
Syntax of ::cue
::cue(selector) {
property1:value1;
…
…
property-n:value-n;
}
or
::cue {
property1:value1;
…
…
property-n:value-n;
}