welcome to tutorialfamily

css pseudo element

pseudo element used for apply styling to specified part of an element

All element given below with example


pseudo element

  • ::first-line – styling to first line of an element
  • ::first-letter – styling to first letter of an element
  • ::before – set content before element
  • ::after – set content after element

first line pseudo element


						        
<!DOCTYPE html>
<html>
<head>
<style>
     p::first-line {
        color: #ff0000;
        font-size: 14px;
     }
</style>
</head>
<body>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
        industry's standard dummy text ever since the 1500s.
    </p>
</div>
</body>
</html>



Run

first letter pseudo element


						        
<!DOCTYPE html>
<html>
<head>
<style>
     p::first-letter {
        color: #ff0000;
        font-size: 14px;
     }
</style>
</head>
<body>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
        industry's standard dummy text ever since the 1500s.
    </p>
</div>
</body>
</html>



Run

before pseudo element


						        
<!DOCTYPE html>
<html>
<head>
<style>
     p::before {
        content: "hey whatsup";
     }
</style>
</head>
<body>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
        industry's standard dummy text ever since the 1500s.
    </p>
</div>
</body>
</html>



Run

after pseudo element


						        
<!DOCTYPE html>
<html>
<head>
<style>
     p::after {
        content: "hey whatsup";
     }
</style>
</head>
<body>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
        industry's standard dummy text ever since the 1500s.
    </p>
</div>
</body>
</html>



Run

Our Content