welcome to tutorialfamily

css pseudo element

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

Home
Next

Our Content