Breaking News: Grepper is joining You.com. Read the official announcement!

Before and After Pseudo Selectors

Add Answer

Stylin Ali answered on July 17, 2021 Popularity 10/10 Helpfulness 2/10

answer Before and After Pseudo Selectors

related how to use before pseudo class in css

related how to use after pseudo class in css

Before and After Pseudo Selectors

Comment

<!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">
    <title>Before and after pseudo selector</title>
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
        }

        header::before{
            background: url('https://source.unsplash.com/collection/190727/1600x900') 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::after{
        content:"this is a content"
    } */

    </style>
</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 error ratione doloribus sed dolorum,
                ipsum cumque reprehenderit dignissimos architecto veniam optio sint aliquam consectetur corrupti vero
                similique velit. Possimus eum consequatur delectus quia magni.</p>
        </section>
       
</body>

</html>

Popularity 10/10 Helpfulness 2/10 Language css

Source: www.codewithharry.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Aug 17 2022

Stylin Ali

0 Answers Avg Quality 2/10

Closely Related Answers

how to use before pseudo class in css

Comment

a::before {
  content: "whatever content you want to display";
  /*css declaration*/
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 17 2021

Magnificent Magpie

0 Answers Avg Quality 2/10

how to use after pseudo class in css

Comment

-1

a::after {
  content: "whatever content you want to display";
  /*css declaration*/
}

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Jul 17 2021

Magnificent Magpie

0 Answers Avg Quality 2/10

Before and After Pseudo Selectors

Contents

More Related Answers

Before and After Pseudo Selectors

Closely Related Answers

how to use before pseudo class in css

how to use after pseudo class in css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.