CSS Pseudo-element — TutorialBrain

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;
}

Note/Info/Success As per W3C recommendation, ::pseudo-element is recommended over :pseudo-element although the browser won't give any error if you use any of these syntax's. As per CSS3,Double colon (::) is used while CSS2 uses single colon(:)
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;
}

Note/Info/Success ::first-letter does not support all the elements. This supports -

Color related properties like color.

Background related properties like background-color, background-image, background-position, background-repeat etc.

Font related properties like font, font-color, font-style, font-size, font-weight, font-family, font-variant, font-stretch etc.

All text related properties like text-decoration, text-shadow, text-transform etc.

The Box Model properties like margin, border, padding etc.

Margin related properties like margin-top, margin-right, margin-bottom and margin-left.

Border related properties like border-top, border-right, border-bottom and border-left, border-color, border-width, border-style, border-image and border-radius.

Padding related properties like padding-top, padding-right, padding-bottom and padding-left.

Other properties like word-spacing, line-spacing, line-height, vertical-align, word-spacing etc.

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.

Note/Info/Success Be careful while using pseudo elements. This does not support all the elements. The Properties which are allowed here are:

color properties like color

Background properties like background-color, background-image, background-position etc.

Font related properties like font, font-color, font-style, font-size, font-weight, font-family, font-variant etc.

text related properties like text-decoration, text-shadow, text-transform etc.

Other properties like word-spacing, line-spacing, line-height, vertical-align, word-spacing etc.

Syntax of ::first-line
selector::first:line {
property1:value1;
…
…
property-n:value-n;
}

Note/Info/Success justify-content:space-around & justify-content:space-evenly looks similar but have a closer look to understand it properly.

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;
}

Example of ::before Pseudo-element

li::before {
     content: " > ";
     }

::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;
}

Example of ::after pseudo-element

li::after {
     content: " * ";
     }

::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

Example of ::selection Pseudo-element

li::selection {
 color: Hotpink; 
}

Follow @tutorial_brain

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;
}

::cue {
property1:value1;
…
…
property-n:value-n;
}