Before and After Pseudo Selectors in CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="CSS/Before_After_Pseudo_Selectors.css">
    <title>Before_After_Pseudo_Selectors</title>
    <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <nav class="navbar">
            <ul class="navigation">
                <li class="item">Home</li>
                <li class="item">About</li>
                <li class="item">Services</li>
                <li class="item">Contact us</li>
            </ul>
        </nav>
    </header>
    <section>
        <h1>Welcome to coding World</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident, inventore ipsum autem neque officia
            dignissimos ut unde modi voluptatibus, voluptates corporis dolorem illum earum quibusdam debitis eaque
            soluta esse. Nihil unde dolore maxime quos.</p>
    </section>
</body>

</html>





Below File is CSS/Before_After_Pseudo_Selectors.css File.
body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #ffffff;
}

header::before {
    background: url("https://images.unsplash.com/photo-1630349575347-89fde96c7e4f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center center/cover;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.3;
}

.navigation {
    font-family: "Bree Serif", serif;
    font-size: 20px;
    display: flex;
}

li {
    list-style: none;
    padding: 20px 23px;
}

section {
    height: 344px;
    font-family: "Bree Serif", serif;
    margin: 3px 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size: 4rem;
}

p {
    text-align: center;
}

/* section::before{
    content: "This is a content before"
}
section::after{
    content: "This is a content after"
} */



Comments

Post a Comment