pesudo element

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height: 200px;
            width: 200px;
            background: #22bf60;
        }
        .box:hover{
            height: 250px;
            width: 250px;
            background: red;
        }
        .p:first-line{
            color: red;
        }

        .p:before{
            content: "*";
            color: green;
            font-size: x-large;
        }
        .p:after{
            content:'*';
            color: green;
            font-size: x-large;

        }
        .p:first-letter{
            color: #042a84;
            font-size: x-large;
        }

    </style>
</head>
<body>
<div class="box">

</div>


<p class="p">
    CSS pseudo-elements are used to add special effects to some selectors. You do <br>
    not need to use JavaScript or any other script to use those effects. A simple<br>
    syntax of pseudo-element is as follows:
</p>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

sticky

  <!DOCTYPE html > <html lang ="en" > <head> <meta charset ="UTF-8" > <title> Title </title> <style> . menu { background : #22bf60 ; height : 50 px ; font-size : large ; position : sticky ; top : 0 px ; } p { width : 20 % ; } </style> </head> <body> <p> CSS gives you an opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.M <br> The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom. <br> A z-index property can help you to create more complex webpage layouts. The following example shows how to create layers in CSS. <b...
Read more