Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Decorative Pseudo-Elements | Decorative Effects
CSS Fundamentals

book
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.

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

selector::after {
/* some properties */
}
  • ::before add 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:

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="list">
<li class="item"><a href="#" class="link">contacts</a></li>
<li class="item"><a href="#" class="link">details</a></li>
<li class="item"><a href="#" class="link">price</a></li>
<li class="item"><a href="#" class="link">faq</a></li>
</ul>
</body>
</html>

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 4

Pregunte a AI

expand
ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

We use cookies to make your experience better!
some-alt