What are pseudo-elements?

Pseudo-elements are not actual elements in a webpage; instead, they are elements created within an HTML tag through CSS, allowing for the addition of up to two elements. These added elements, just like actual webpage elements, can be styled and manipulated using CSS.

The advantage of using pseudo-elements lies in their ability to keep the code cleaner and more organized, avoiding clutter.

Generally speaking, ::before and ::after are two of the most commonly used pseudo-elements. ::before creates a new element ‘before’ the original element, while ::after adds a new element ‘after’ the original one.

It’s important to note that these pseudo-elements must have a ‘content’ property in the code. Without the content property, the pseudo-elements will not be displayed on the screen.

Let's try!

Let’s try adding a ::before and ::after element to a CONTACT button. Here’s how the code would look: Check on my codepen

HTML
<a href="" class="btn">CONTACT</a>

CSS
.btn {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
    color:  #8dc4e3;
    position: relative; 
    display: inline-block;
    padding: 20px;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
}

.btn:hover {
    color:  #8dc4e3;
}

.btn::before {
    content: ""; /* Without this segment, the pseudo-element will not be generated */
    width: 0%;
    height: 7px;
    background-color:  #8dc4e3;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    transition: 0.3s;
}

.btn:after {
    content: ""; /* Without this segment, the pseudo-element will not be generated */
    width: 0%;
    height: 7px;
    background-color: #8dc4e3;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    transition: 0.3s;
}

.btn:hover:before {
    width: 100%;
}

.btn:hover:after {
    width: 100%;
}