Enhancing Web Design with ::before and ::after Pseudo-Elements in CSS

Before & after Pseudo-elements

The ::before and ::after pseudo-elements in CSS allow you to insert content before or after the content of an element, respectively. These pseudo-elements are often used to add decorative or structural elements to an element without needing to modify the actual HTML content.

::before Pseudo-element:

::before is used to insert content before the content of the selected element.
It creates a virtual element that appears as the first child of the selected element.
You can use the content property to specify what content should be inserted

::after Pseudo-element:

::after is used to insert content after the content of the selected element.
It creates a virtual element that appears as the last child of the selected element.
Similar to ::before, you can use the content property to specify what content should be inserted.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Before After Pseudo-elements</title>
    <style>
      p::before {
        content: url("images/face.png");
      }
      p::after {
        content: url("images/dog.png");
      }
      span::before {
        content: "$";
      }
    </style>
  </head>
  <body>
    <h1>Before & after Pseudo-elements</h1>

    <p>I Love Dogs</p>

    <h5>Total Amount <span>500</span></h5>
  </body>
</html>

Live Preview

The CSS code you provided uses the ::before and ::after pseudo-elements to insert content before and after specified elements.

p::before: This selector targets the pseudo-element ::before for all <p> (paragraph) elements.
content: url("images/face.png");: This property sets the content of the ::before pseudo-element to an image located at the "images/face.png" URL. It will display the "face.png" image before the content of each <p> element.
p::after: This selector targets the pseudo-element ::after for all <p> elements.
content: url("images/dog.png");: This property sets the content of the ::after pseudo-element to an image located at the "images/dog.png" URL. It will display the "dog.png" image after the content of each <p> element.
span::before: This selector targets the ::before pseudo-element for all <span> elements.
content: "$";: This property sets the content of the ::before pseudo-element to a dollar sign "$". It will insert a dollar sign before the content of each <span> element.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Before After Pseudo-elements</title>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700");
      *,
      *:before,
      *:after {
        box-sizing: border-box;
      }
      body {
        font-family: "Roboto Condensed";
        text-align: center;
        padding: 30px 0;
      }
      h1 {
        font-size: 60px;
        line-height: 1;
        color: rgb(50, 50, 50);
      }

      h1.title {
        display: inline-block;
        position: relative;
      }
      h1.title::before,
      h1.title::after {
        content: "";
        display: block;
        width: 60px;
        height: 60px;

        position: absolute;
        top: 0;
        border-top: solid 30px transparent;
        border-bottom: solid 30px transparent;
      }
      h1.title::before {
        left: -70px;
        border-right: solid 60px rgb(255, 150, 50);
      }
      h1.title::after {
        right: -70px;
        border-left: solid 60px rgb(255, 150, 50);
      }
    </style>
  </head>
  <body>
    <h1 class="title">Before & after Pseudo-elements</h1>
  </body>
</html>

Live Preview

CSS box-sizing property for all elements, including pseudo-elements (*:before and *:after), to border-box. This ensures that when you set the width or height of an element, it includes padding and borders within those dimensions, simplifying layout calculations.

Header Title Decoration (Before and After):

These rules target the ::before and ::after pseudo-elements of <h1> elements with the class "title."
content: ""; ensures the pseudo-elements have content.
display: block; makes them block-level elements, allowing them to be styled as blocks.
width and height set the dimensions of both pseudo-elements to 60 pixels by 60 pixels.
position: absolute; positions them absolutely relative to the <h1> with class "title."
top: 0; places them at the top of the <h1>.

After Pseudo-element (Right Side):

right: -70px; positions the ::after pseudo-element 70 pixels to the right of the <h1> element.
border-left creates a left-facing triangle with a solid border on the right side of the pseudo-element, matching the color of the ::before pseudo-element.

Both ::before and ::after pseudo-elements are versatile and can be used to enhance the appearance of elements by adding icons, text, or other decorative elements without modifying the actual HTML content. They are also commonly used for creating custom bullets for lists or adding quotes to blockquotes, among other creative uses.