Simple CSS Border Animation with before and after Selector

In this tutorial we will see how to create Simple CSS Border Animation with before and after Selector. CSS ::before and ::after pseudo elements or selectors are used to create this rotating border animation effect.

Table of Contents

• HTML Code
• CSS Code
• Demo
• Video Tutorial
• More CSS Tutorials

HTML Code

HTML Code is given below, in this code we have a main div with class = 'card'.

<div class="card">
</div>    

CSS Code

CSS Code is given below, ::before selector is to create border for the main card div, while ::after selector is used to create the overlay. CSS transform property is used to rotate the border element of the card. This creates the border rotation animation effect.

body
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #333;
    font-family: 'Barlow Condensed' , sans-serif;
}
.card
{
    width: 200px;
    height: 250px;
    background-color: #000;
    position: relative;
    box-shadow: 0px 0px 5px 2px #000;
    cursor: pointer;
    overflow: hidden;
}
.card::before
{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-280deg);
    width: 160%;
    height: 130%;
    background-image: conic-gradient(#ff00bb 0deg, #ff00bb 90deg, transparent 130deg, transparent 180deg, #4530FF 180deg, #4530FF 270deg, transparent 310deg, transparent 360deg);
    transition: transform 2s;
}
.card:hover::before
{
    transform: translate(-50%,-50%) rotate(-100deg);
}
.card::after
{
    content: 'HowToCodeSchool.com';
    color: #ddd;
    position: absolute;
    background-color: #000;
    display: flex;
    font-size: 17px;
    align-items: center;
    justify-content: center;
    height: 242px;
    width: 192px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Simple CSS Border Animation with before and after Selector.