Pseudo-Elements.

In CSS you want to target a specific HTML element to design or modify. The main use of the Pseudo-elements-

Style the first line or letter of a specific element.
Put content before and after the element.

Syntax.

Id, class, tag::pseudo-element {
  property: value;
}

::before(:before).

It generates or creates a pseudo-element before the first child of the selected element, simply it creates an element before the content of the selected element.

::after(:after). Pseudo-element :after is similar as :before but the small difference is that the positioning is after the last child of the selected element/ after the content of the selected element.

HTML.

<body>
    <div>
      <form action="">
        <label class="imp-label" for="name">name</label>
        <input type="text" name="name" />

        <label for="email">email</label>
        <input type="text" name="email" />

        <button data-tooltip="Tooltip" type="submit">Submit</button>
      </form>
    </div>
  </body>

CSS.

 /* before */
      .imp-label::before {
        content: "";
        display: block;
        width: 35px;
        height: 2px;
        background-color: #e21717;
      }

 /* after :: part of label */
      .imp-label::after {
        content: "";
        display: block;
        width: 35px;
        height: 2px;
        background-color: #e21717;
      }

Result.

Let's take another example-

HTML.

 <body>
    <div>
      <form action="">
        <label class="imp-label" for="name">name</label>
        <input type="text" name="name" />

        <label class="imp-text" for="email">email</label>
        <input type="text" name="email" />

        <button data-tooltip="Tooltip" type="submit">Submit</button>
      </form>
    </div>
  </body>

CSS.

/* before */
      .imp-label::before {
        content: "";
        display: block;
        width: 35px;
        height: 2px;
        background-color: #e21717;
      }

      .imp-text::before {
        content: "";
        display: block;
        width: 35px;
        height: 2px;
        background-color: #e21717;
      }

      [data-tooltip] {
        position: relative;
      }
      /* after :: part of label */
      .imp-label::after {
        content: "";
        display: block;
        width: 35px;
        height: 2px;
        background-color: #e21717;
      }

      .imp-text::after {
        content: "";
        display: block;
        width: 35px;
        height: 2px;
        background-color: #e21717;
      }

      [data-tooltip]:hover:after {
        content: attr(data-tooltip);
        position: absolute;
        top: 20px;
        left: 0px;
        right: 0px;
        margin-top: 5px;
        padding: 5px;
        background-color: #758283;
      }

Result.

Pseudo Elements ::Before::After

Before and After pseudo elements in Css explained in a simple manner.

Table of contents

Pseudo-Elements.

Syntax.

::before(:before).