Menü schliessen
Created: December 6th 2023
Last updated: March 16th 2024
Categories: Common Web Development
Author: Tim Fürer

CSS: How to add text and custom elements with ::before and ::after

Tags:  CSS,  css3,  guide,  HTML
Donation Section: Background
Monero Badge: QR-Code
Monero Badge: Logo Icon Donate with Monero Badge: Logo Text
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

In the domain of web development, CSS (Cascading Style Sheets) serves as a fundamental tool for styling web pages, offering various features to manipulate elements dynamically. Among these features, the pseudo elements ::before and ::after stand out for their capacity to insert content into the DOM (Document Object Model) without altering the HTML structure.

::before and ::after

The ::before and ::after pseudo elements allow developers to insert content before and after the content of an element, respectively, through CSS styling. These elements are termed "pseudo" because they do not represent real elements but rather generate content dynamically within the rendered document.

Syntax and Implementation

The syntax for implementing ::before and ::after pseudo elements is rooted in CSS selectors.

.element::before {
    /* CSS properties */
    content: "xyz";
}

.element::after {
    /* CSS properties */
    content: "";
}

The content property within the pseudo element selector determines the content to be inserted before or after the target element. This content can range from text strings to generated counters or even empty quotes to create purely decorative elements. What matters is that the property is declared, otherwise the pseudo elements won't render.

It's crucial to note that this content is purely generated and does not exist within the HTML markup. As such, it is not accessible to JavaScript or screen readers, serving primarily as a presentational enhancement.

Within the pseudo element block, developers can specify any CSS properties to style the inserted content.

Applications

  • Enhancing Design Elements
    By leveraging ::before and ::after pseudo elements, developers can add subtle embellishments and decorative accents to design elements. This could involve creating custom bullet points for lists, adding decorative borders to containers, or integrating decorative icons seamlessly into the design.
  • Dynamic Text Generation
    ::before and ::after pseudo elements offer a dynamic approach to text generation, allowing developers to insert supplementary text or status indicators without cluttering the HTML markup. This is particularly useful for elements like buttons or links, where additional textual information is required for enhanced user interaction.
  • Complex Border Styling
    Complex border styles, such as double borders, gradient borders, or even custom shapes, can be achieved by cleverly leveraging pseudo elements. By combining CSS properties like border, background, and transform, developers can create visually striking border effects that elevate the overall design aesthetic.