Pseudo Elements Property in CSS

This pseudo-element can be defined as a keyword which is combined to a selector that defines the special state of the selected elements. Unlike the pseudo-classes, this pseudo-elements are used to style the specific part of an element, whereas the pseudo-classes are used to style the element.

Selector	used for
::after	The insert something after the content of each < p > element
::before	The insert something before the content of each < p > element
::first-letter	The selects the first letter of each < p > element
::first-line	The selects the first line of each < p > element
::selection	The selects the portion of an element that is selected by a user

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input::placeholder{
      color:teal;
    }
    p::selection{
      background-color: #222f3e;
    color:white;
    }
    p::first-letter{
      font-size: 18px;
      font-weight: bold;
      color:red;
    }
    p::first-line{
      color:blue;
    }

    .box{
      background-color: #333;
      color:white;
       width: 300px;
      height: 100px;
      position: relative;
    }
    .box::before
    {
      content: '';
      width: 100%;
      height: 20px;
      background-color:#ff4757;
      position: absolute;
      top: 0;
      left: 0;
    }
    .box::after
    {
      content: '';
      width: 100%;
      height: 20px;
      background-color:#ff4757;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="box">pseudo elements</div>

 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto vel veniam expedita maxime voluptates autem officia iste ut at ipsam.
      maxime voluptates autem officia iste ut at ipsammaxime voluptates autem officia iste ut at ipsammaxime voluptates autem officia iste ut at ipsammaxime voluptates autem officia iste ut at ipsammaxime voluptates autem officia iste ut at ipsammaxime voluptates autem officia iste ut at ipsam
    </p>


    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto vel veniam expedita maxime voluptates autem officia iste ut at ipsam.</p>
  
   <input type="text" placeholder="Enter Name">

</body>
</html>

<!--
  ::before
  ::after
  ::first-letter
  ::first-line
  ::selection
  ::placeholder
-->

Output

Pseudo Elements Property in CSS

Source Code :

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects