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.
css91234567selector::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:
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.list {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
display: flex;
justify-content: space-between;
background-color: darkcyan;
padding: 5px;
border-radius: 4px;
}
.item {
padding: 5px 10px;
background-color: antiquewhite;
border-radius: 4px;
margin: 5px;
}
.link {
display: flex;
align-items: center;
text-decoration: none;
color: black;
font-size: 36px;
}
/* Let's play with the `before` content */
.link::before {
content: "";
width: 24px;
height: 24px;
background-size: cover;
}
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 5. Capítulo 4
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla