In this post I will show you how to use CSS ::after pseudo elements to build a stylish UI.

CSS Pseudo Elements

There are two different pseudo elements that can be used in CSS I will cover.

::before - used to create an element at the beginning of the element this tag is used on
::after - used to create an element at the end of the element this tag is used on

This post will primarily be focused on the ::after pseudo element but the same concept works on both.

Uses

These are great elements to attach or create a decorative feature to the main element they are attached to.

Simple example would be to create a list of numbers. Then if you want to add the # symbol to the beginning of each list item, you could use ::before.

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>

li::before {
	content: '#';
}

The output would be:

This approach would just be under utilizing the power behind CSS pseudo elements. They perform well when using as a animated action on screen for the user.

Code

Here I will walk you through an example of using the ::after pseudo element with decorating a header element with an underlined transition.

Base Setup

Below is the base CSS setup for the page. It just sets a background color with a centered div element containing a header element.

:root {
	--random-bg: blue;
}

html {
	background-color: #004e5c;
	width: 100vw;
	height: 100vh;
}

body {
	color: whitesmoke;
  	background-color: #004e5c;
	display: flex;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 0;
}

.center {
	margin: auto;
}

.test {
	margin: auto;
}

Now for the HTML. Nothing fancy, all the work is being done in CSS.

<!DOCTYPE html>
<html>
<head>
<title>CSS Animations</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div class = "test"> 
		<h1>Sample Hover Animation</h1>
    </div>
</body>
</html>

Now we will go through the CSS for the elements.

H1

Here we set some padding and a transition. The transition is there because we are doing to do an animated transition when the user hovers over the element. We want to the element to go back the how it was before the hover animation smoothly. If the transition wasn't there, the values would snap back, less attractive. This will be shown in the next step.

NOTE

The all parameter in the transition means to animate all attributes of the element. If we just wanted to animate the background color, we would change this parameter to background-color.

h1 {
	padding: 15px;
	transition: all ease 2s;
}

H1:hover

Here we set a few values to change for the hover transition animation.

color	for the text via a CSS variable shown in the first step
background-color	new background color to change to when user is hovering over element
border-radius	round out the corners a bit

h1:hover {
	color: var(--random-bg);
	background-color: orchid;
	border-radius: 10px;
}

H1::after

content	leave as empty to show no content
display	flex to display element orientation
width	0% because we want it not shown yet, only when user hovers over header element
margin	auto helps center the item
justify-content	center the element
height	thin height of the element, we are using it as an underline element
background-color	set a default color
transition	animate all attributes set, ease is the animation timing, 2s is the duration

h1::after {
	content: '';
    display: flex;
    width: 0%;
    margin: auto;
    justify-content: center;
    height: 5px;
	background-color: lightblue;
	transition: all ease 2s;
}

H1:hover::after

This is where the magic happens for the ::after element. When the user hovers over the H1 element, these changes take effect.

background-color	new background color for ::after element
width	now the item will grow to 100% width of the H1 element
transition	animate all attributes set above in this style, ease is the animation timing, 2s is the duration

h1:hover::after {
	background-color: var(--random-bg);
	width: 100%;
	transition: all ease 2s;
}

Result

Hope this was useful and well informed.