CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Pseudo Elements

A pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

For example, ::first-line can be used to change the font of the first line of a paragraph.

Syntax:
selector::pseudo-element {
     property: value;
}

As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntax for the original pseudo-elements.


The ::first-line pseudo-element

The ::first-line pseudo-element applies styles to the first line of a block-level element.

Run code

The ::first-letter pseudo-element

The ::first-letter pseudo-element applies styles to the first letter of the first line of a block-level element.

Run code

The ::after pseudo-element

In CSS, ::after creates a pseudo-element that is the last child of the selected element.

It is often used to add cosmetic content to an element using the content property. It is inline by default.

Run code

The ::before pseudo-element

In CSS, ::before creates a pseudo-element that is the first child of the selected element.

It is often used to add cosmetic content to an element using the content property. It is inline by default.

Run code

The ::selection pseudo-element

The ::selection pseudo-element applies styles to the portion of a document that has been highlighted by the user (such as with the mouse).

Run code

The ::placeholder pseudo-element

The ::placeholder pseudo-element represents the placeholder text of a form element.

Run code

CSS Pseudo Elements

Below down is a list of all pseudo-elements:

Selector Example Description
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
::first-letter p::first-letter Selects the first letter of each <p> element
::first-line p::first-line Selects the first line of each <p> element
::placeholder input[type="text"]::placeholder Selects the placeholder text of an input element
::selection p::selection Selects the portion of each <p> that is selected by a user