October 3, 2023

Use CSS Pseudo Classes for Your Design Accents

Play Video

CSS Pseudo Classes are an excellent way to add design accents to your website without adding extra HTML elements. This tutorial will show you how to use CSS pseudo elements ::before and ::after to create accent lines next to your headings.

Adding the Class to Your HTML Element

Navigate to the HTML element you want to style, such as a heading, and add the class accent-lines.

<h2 class="accent-lines">Get Support</h2>

Writing the Combined CSS

Open your CSS file or customizer and write the CSS for the ::before and ::after pseudo elements. Here’s how to combine all the properties into one CSS code block:

.accent-lines::before, .accent-lines::after {
  content: "";
  width: 20px;
  border-bottom: 1px solid red;
  margin: auto;

.accent-lines::before {
  margin-right: 0.5em;

.accent-lines::after {
  margin-left: 0.5em;

Customizing Your Design

Feel free to adjust the width, color, and margins to fit your design needs. For example, you can change the width to 40px and the color to light gray.

.accent-lines::before, .accent-lines::after {
  width: 40px;
  border-bottom: 1px solid lightgray;

Supplementary Resources

Conclusion of CSS Pseudo Classes

Using CSS Pseudo Classes for design accents is a clean and efficient method. By following this tutorial, you can easily add stylish accents to your headings or any other elements on your website.

Credit to The Admin Bar
The Admin Bar is a resourceful platform dedicated to WordPress. From insightful videos on optimizing your WordPress tech stack to creative hacks for faster web page creation, the channel is a treasure trove for both beginners and advanced WordPress users.
Use CSS Pseudo Classes for Your Design Accents
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.