DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • Orgchart With CSS Flex and ZK
  • Circle Text With CSS and JavaScript
  • The Ultimate Guide to Code Formatting: Prettier vs ESLint vs Biome
  • Subtitles: The Good, the Bad, and the Resource-Heavy

Trending

  • Resilience Pattern: Circuit Breaker
  • RAG vs. CAG: A Deep Dive into Context-Aware AI Generation Techniques
  • Four Essential Tips for Building a Robust REST API in Java
  • Integrating Apache Spark With Drools: A Loan Approval Demo
  1. DZone
  2. Coding
  3. Languages
  4. CSS: :before and :after

CSS: :before and :after

Take a look at how to use CSS's :before and :after pseudo elements with the help of some handy examples like adding icons and clearing floats.

By 
Tatjana Boskovic user avatar
Tatjana Boskovic
·
May. 21, 18 · Tutorial
Likes (16)
Comment
Save
Tweet
Share
14.4K Views

Join the DZone community and get the full member experience.

Join For Free

The CSS :before and :after properties are what are also known as pseudo elements. They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them.

The Syntax

If we have an element like this one:

<h2>welcome to our website</h2>

We can add a pseudo element before it using CSS, like this:

h2:before {
    content: “Hello“;
    color : blue;
}


The result will be:

before_add_element

This is a quite simple principle. You are adding content before or after a certain element. It can be extremely helpful when adding icons, clearing floats, and in many other cases.

The content property of the pseudo element can be left empty with empty quotes like this content: “”. This way, you can treat the pseudo element like a box with no content. If the content property is removed altogether, the pseudo element will not work.

Adding Icons

Probably the most popular usage of the before and after pseudo elements is using them to add icons. Let’s look at the markup.

HTML:

<h2>Weather report</h2>


CSS:

h2:before {
    content: “ ”; 
    display: block;
    height: 15px;
    width: 25px;
    url: (‘images/icon.png’’);
    margin-right: 5px;
}


The result:

before_add_icon

Now we have successfully added an icon before the text. Easy, right?

Clearing Floats

After elements are floated, another one needs to be added in order to clear that float. You can avoid adding a new element by simply using a pseudo one.

Let's say we have this situation:

after_clear_float

We can use the following code to clear the floats.

HTML:

<div class="box-container">
    <div class=”box”></div>
    <div class=”box”></div>
</div>
<p>Lorem ipsum dolor amet truffaut kombucha roof party iPhone forage farm-to-table.</p>


CSS:

.box-container:before,
.box-container:after {
    content: "";
    display: block;
}

.box-container:after {
    clear: both;
}

.box {
    height: 100px;
    width: 100px;
    background-color: #C98EED;
    margin: 5px;
    float: left;
}


Now, let's take a look at the result.

after_float_cleared

By using this method, we are clearing the float and the paragraph is moved below the two elements.

Using a Background Image

We can also add a background image to a pseudo element. This is commonly used when styling a header.

HTML:

<h2>Hello World</h2>


CSS:

h2:after {
    content: “”;
    width: 100%;
    height: 30px;
    background: url(‘underline.png’) center center no-repeat;
    display: block;
}


The result achieved:

after_add_background

Browser Support

As with everything else in CSS, browser support needs to be checked. By consulting the Can I Use service, we see that these pseudo classes have a high browser support (over 98%) and we won’t have a headache when using them.

Summary

Here, we have explained basic principles of the CSS pseudo elements. The examples illustrate just some of the many possible usages. Don't worry if it's not completely clear in the beginning. A little practice goes a long way.

Hopefully, this article will help with any future projects. Thank you for reading!

CSS Element

Published at DZone with permission of Tatjana Boskovic, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Orgchart With CSS Flex and ZK
  • Circle Text With CSS and JavaScript
  • The Ultimate Guide to Code Formatting: Prettier vs ESLint vs Biome
  • Subtitles: The Good, the Bad, and the Resource-Heavy

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: