WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Pseudo-elements


What are Pseudo-Elements?

A CSS pseudo-component is utilized to style indicated parts of an element.

For model, it tends to be utilized to:

  • Style the main letter, or line, of an element
  • Insert content previously, or after, the substance of a component

Syntax

The language structure of pseudo-elements:

selector::pseudo-component {
    property:value;
}

The ::first-line Pseudo-element

The ::first-line pseudo-component is utilized to include an extraordinary style to the main line of a text.

The following precedent arrangements the primary line of the content in all <p> elements:

Example 

p::first-line {
    shading: hotpink;
    text style variation: little caps;
}

Note: The ::first-line pseudo-component must be connected to square dimension elements.

The following properties apply to the ::first-line pseudo-element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

The ::first-letter Pseudo-element

The ::first-letter pseudo-component is utilized to add an exceptional style to the first letter of a text.

The following precedent configurations the main letter of the content in all <p> elements: 

Example

p::first-letter {
    shading: hotpink;
    text dimension: xx-large;
}
Try it yourself »

Note: The ::first-letter pseudo-component must be connected to square dimension elements.

The following properties apply to the ::principal letter pseudo-element: 

  • text style properties
  • shading properties 
  • foundation properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-adjust (just if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-components and CSS Classes

Pseudo-components can be joined with CSS classes: 

Example

p.intro::first-letter {
    shading: hotpink;
    text style size:200%;
}
Try it yourself »

The model above will show the main letter of sections with class="intro", in yellow and in a bigger size.


Multiple Pseudo-elements

Several pseudo-components can likewise be combined.

In the accompanying model, the principal letter of a section will be yellow, in a xx-expansive text dimension. Whatever is left of the primary line will be blue, and in little tops. Whatever is left of the section will be the default text dimension and color:

Example

p::first-letter {
    shading: hotpink;
    text dimension: xx-large;
}

p::first-line {
    shading: #0000ff;
    textual style variation: little caps;
}
Try it yourself »

CSS - The ::before Pseudo-element

The ::before pseudo-component can be utilized to embed some substance before the substance of an element.

The following model embeds a picture before the substance of each <h1> element:

Example

h1::before {
    content: url(W1-icon.png);
}
Try it yourself »

CSS - The ::after Pseudo-element

The ::after pseudo-component can be utilized to embed some substance after the substance of an element.

The following model embeds a picture after the substance of each <h1> element:

Example

h1::after {
    content: url(W1-icon.png);
}
Try it yourself »

CSS - The ::determination Pseudo-element

The ::selection pseudo-component coordinates the bit of a component that is chosen by a user.

The following CSS properties can be connected to ::selection: color, background, cursor, and outline.

The following model makes the chose content yellow on a green background:

Example

::determination {
    shading: yellow;
    foundation: green;
}
Try it yourself »

All CSS Pseudo Elements

There are five pseudo components in CSS, each beginning with a twofold colon (::):

Selector Example Example description
::after p::after Insert something after the substance of each <p> element
::before p::before Insert something before the substance of each <p> element
::first-letter p::first-letter Selects the primary letter of each <p> element
::first-line p::first-line Selects the main line of each <p> element
::selection p::selection Selects the segment of a component that is chosen by a user