CSS Solid

☰

Pseudo-Elements - 1) ::before 2) ::after

::before - Inserts content beginning of the targeted element content.

::after - Inserts content end of the targeted element content.

Example: Insert an image before the P element. Insert a text after the P element.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Pseudo Elements - ::before && ::after</title>
    <style>
        body {
            font-size:40px;
            padding:50px;
            border:1px solid green;
        }
        p::before {
             content:url("Tasks_OK.png");
        }
        p::after {
            content: "together!"
        }
    </style>
</head>
<body>
    <div>
        <p> Let us work </p>
        <p> Let us play </p>
        <p> Let us sing </p>
    </div>
</body>
</html>

Result:

In the above example,

  • Three P elements are placed.
  • An image is attached beginning of the every P element.
  • An exclamation mark (!) is attached end of the every P element.