9.1 Pseudo-elements ::before and ::after
Pseudo-elements ::before and ::after are powerful tools in CSS that let you add decorative elements before or after the content of elements without changing the HTML. They're widely used for creating visual effects, enhancing the user interface, and adding styles to elements.
Description:
::before: a pseudo-element added before the content of an element::after: a pseudo-element added after the content of an element
Syntax:
element::before {
/* styles for before pseudo-element */
}
element::after {
/* styles for after pseudo-element */
}
Main Properties
Pseudo-elements ::before and ::after can contain almost any CSS properties, including color, size, positioning, background, shadows, etc. However, to make a pseudo-element visible, you need to set its content and size.
content: sets the content of the pseudo-element. It can be text, an image, or an empty stringdisplay: sets the display type of the pseudo-element. Usuallyblockorinline-blockis usedposition: controls the positioning of the pseudo-element (e.g.,absoluteorrelative)widthandheight: set the size of the pseudo-element
9.2 Adding Text
With the content property, you can easily add text at the beginning or the end of any element.
.example::before {
content: "Start: ";
color: blue;
}
.example::after {
content: " :End";
color: red;
}
<body>
<p class="example">This is an example text</p>
</body>
Code Explanation:
.example::before: adds the text "Start: " before the content of the element and colors it blue.example::after: adds the text " :End" after the content of the element and colors it red
9.3 Decorative Lines
You can also add decorative lines framing the content:
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
<body>
<div class="decorative-line">Text with decorative lines</div>
</body>
Code Explanation:
.decorative-line::before: creates a decorative line before the content of the element.decorative-line::after: creates a decorative line after the content of the element
9.4 Inserting Icons
Not enough with just text? You can easily insert a couple of icons:
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
<body>
<p class="icon">Text with icon</p>
</body>
Code Explanation:
.icon::before: adds an icon before the text using an image URL
9.5 Complex Decorative Elements
And let's add something more complex:
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
<body>
<div class="complex-decor">Element with a decorative corner</div>
</body>
Code Explanation:
.complex-decor::before: creates a decorative element before the main content using a gradient and absolute positioning.complex-decor: sets relative positioning for the parent element so that the pseudo-element can be positioned relative to it
9.6 Using Animations
You can even add some animation:
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
<body>
<div class="animated"></div>
</body>
Code Explanation:
.animated::before: creates a square pseudo-element and animates its rotation using keyframes
GO TO FULL VERSION