Building Animations With Pseudo-Elements

Simon Steer
Oct 23, 2017 · 6 min read

A quick intro to ::before and ::after elements

Every element possesses a ::before and ::after pseudo-element, with the exception being elements that are self-closing. They live inside of the element; the ::before pseudo-element belongs immediately inside the opening tag before all of the enclosed content, and the ::after pseudo-element belongs immediately before the closing tag, after all of the enclosed content. Consider the following code:

<style>

h1 {
color: coral;
}

h1::before {
content: '';
width: 15px;
height: 15px;
margin: 10px;
float:left;
background: cornflowerblue;
}

h1::after {
content: 'some content';
color: white;
background: black;
margin-left: 10px;
}

</style>
<h1>pseudo-elements are awesome!</h1>
Image for post
Image for post

Building animations with pseudo-elements

What makes ::before and ::after elements so powerful, is that instead of being able to manipulate and animate only the parent element, we now have access to two additional elements which don’t affect our semantic markup, and can make our animation more exciting and complex. Combining three separate animatable elements and manipulating their z-indexes, we can build some very cool animations. Let’s say we want to build an animation that looks like a profile view of one sphere orbiting around another. We can start by building the parent element:

.one {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.one::before {
content: '';
width: 10px;
height: 10px;
background-color: lightcoral;
border-radius: 50%;
}
.one::after {
content: '';
width: 100%;
height: 100%;
background: cadetblue;
border-radius: 50%;
}
<style>.one {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}

.one::before {
content: '';
width: 10px;
height: 10px;
background-color: lightcoral;
border-radius: 50%;
}

.one::after {
content: '';
width: 100%;
height: 100%;
background: cadetblue;
border-radius: 50%;
}
</style><div class="one"></div>
Image for post
Image for post
@keyframes oneBefore {
0% {
transform: translateX(0);
}
25% {
transform: translate(-100px, 0);
}
50% {
transform: translateX(0);
}
75% {
transform: translate(100px, 0);
}
100% {
transform: translateX(0);
}
}
.one:hover::before {
animation: oneBefore 1.5s infinite;
}
Image for post
Image for post
@keyframes oneBefore {
0% {
transform: translateX(0);
z-index: 0;
}
24.9% {
z-index: 2;
}
25% {
transform: translate(-100px,0);
}
50% {
transform: translateX(0);
}
75% {
transform: translate(100px, 0);
z-index: 2;
}
75.1% {
z-index: 0;
}
100% {
transform: translateX(0);
}
}
Image for post
Image for post
@keyframes oneBefore {
0% {
transform: translateX(0);
z-index: 0;
animation-timing-function: cubic-bezier(.75, 0, .25, 1);
}
24.9% {
z-index: 2;
}
25% {
transform: translate(-100px, 0);
animation-timing-function: cubic-bezier(.75, .25, 1, 1);
}
50% {
transform: translateX(0);
width: 40px;
height: 40px;
animation-timing-function: cubic-bezier(.25, .75, 1, 1);
}
75% {
transform: translate(100px, 0);
z-index: 2;
animation-timing-function: cubic-bezier(.75, 0, .25, 1);
}
75.1% {
z-index: 0;
}
100% {
transform: translateX(0);
width: 10px;
height: 10px;
}
}
Image for post
Image for post
@keyframes oneBefore {
0% {
transform: translateX(0);
z-index: 0;
animation-timing-function: cubic-bezier(.75, 0, .25, 1);
background: crimson;
}
24.9% {
z-index: 2;
}
25% {
transform: translate(-100px, -25px);
animation-timing-function: cubic-bezier(.75, .25, 1, 1);
}
50% {
transform: translateX(0);
width: 40px;
height: 40px;
animation-timing-function: cubic-bezier(.25, .75, 1, 1);
background: lightcoral;
}
75% {
transform: translate(100px, 25px);
z-index: 2;
animation-timing-function: cubic-bezier(.75, 0, .25, 1);
}
75.1% {
z-index: 0;
}
100% {
transform: translateX(0);
width: 10px;
height: 10px;
background: crimson;
}
}
Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store