What Are The Cascading Style Sheets Pseudo Elements

Posted By Bajarangi soft , Posted On 03-11-2020

In CSS pseudo-element is used to style specified parts of an element.So today we discuss how to do it.

What Are The Cascading Style Sheets Pseudo Elements

Step 1:Create index.html file and implement as below code in it.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

Step 2:Implement CSS code as below to set pseudo elements.

<style>
    body {
        background: #c7254e;
    }

    p::first-line {
        color: #ff0000;
        font-variant: small-caps;
    }
    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }

    p::first-line {
        color: #0000ff;
        font-variant: small-caps;
    }
</style>

Complete Code For Cascading Style Sheets Pseudo Elements.

<!DOCTYPE html>
<html>
<head>
    <title>What Are The Cascading Style Sheets Pseudo Elements</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<style>
    body {
        background: #c7254e;
    }

    p::first-line {
        color: #ff0000;
        font-variant: small-caps;
    }
    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }

    p::first-line {
        color: #0000ff;
        font-variant: small-caps;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Cascading Style Sheets Pseudo Elements </h1>
    </div>
    <br>
    <div class="well">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
            suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
            suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
    <br>
</div>
</body>
</html>

Related Post