before_and_after_in_css.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BEFORE AND AFTER IN PSEUDO SELECTORS</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&display=swap" rel="stylesheet">
</head>
<style>
    body {
        padding: 0;
        margin: 0;
        color: azure;
        background-color: black;
        font-family: 'Playfair Display', serif;
        /* background: url(code.jpg) no-repeat center center/cover; */
        
    }

    ul {
        display: flex;
        flex-direction: row;
        list-style: none;
    }

    li {
        padding: 2rem;
        font-size: 1.2rem;
        margin-bottom: 2rem;
    }

    section {
        /* border: 2px solid red; */
        display: flex;
        flex-direction: column;
        align-items: center;
        font-weight: bold;
        font-size: 1rem;
        /* margin: 5rem; */
        justify-content: center;
        text-align: center;
        padding: 1.1rem 1.1rem;
    }

    h1 {
        margin-top: 8rem;
        font-size: 3rem;
    }

    header::before{
        background: url("https://cdn.pixabay.com/photo/2017/09/24/11/59/password-2781614_1280.jpg") no-repeat center center/cover ;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        top: 0;
        left: 0;
        opacity: 0.4;
    }


    /* section::before{
        content: "hi my name is abhishek";
    } */


    /*  section::after {
        content: "hi my name is abhishek";
    } */

</style>

<body>
    <header class="head">
        <nav class="navbar">
            <ul>
                <li class="sahil">Home</li>
                <li class="sahil">About</li>
                <li class="sahil">Support</li>
                <li class="sahil">Contact Us</li>
            </ul>
        </nav>
        <section>
            <div>
                <h1>WELCOME TO CODING WORLD</h1>
            </div>
            <div>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit quo debitis voluptatum optio,
                    molestiae dolorum earum ut blanditiis voluptas aut? Porro, excepturi sit quaerat dolorum iusto
                    voluptatibus voluptates impedit nostrum facere, ducimus nobis illo.
                </p>
            </div>
        </section>
        <hr>
    </header>
</body>

</html>