Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Creating Effects with Decorative Pseudo-Elements | Adding Decorative Effects with CSS
CSS Fundamentals

bookCreating Effects with Decorative Pseudo-Elements

Pseudo-elements ::before and ::after are special selectors that allow us to insert content before or after an element's content. We use them to add decorative elements, such as icons or borders, to an element's content without modifying the actual HTML content.

selector::before {
  /* some properties */
}

selector::after {
  /* some properties */
}
  • ::before adds the content before the element content;
  • ::after adds the content after the element content.

Let's consider the following example, where our task is to add some decoration for the hover effect on the links:

index.html

index.html

index.css

index.css

copy

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 4

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.5

bookCreating Effects with Decorative Pseudo-Elements

Sveip for å vise menyen

Pseudo-elements ::before and ::after are special selectors that allow us to insert content before or after an element's content. We use them to add decorative elements, such as icons or borders, to an element's content without modifying the actual HTML content.

selector::before {
  /* some properties */
}

selector::after {
  /* some properties */
}
  • ::before adds the content before the element content;
  • ::after adds the content after the element content.

Let's consider the following example, where our task is to add some decoration for the hover effect on the links:

index.html

index.html

index.css

index.css

copy

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 4
some-alt