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

how to use after pseudo class in css

Add Answer

Magnificent Magpie answered on July 17, 2021 Popularity 10/10 Helpfulness 2/10

answer how to use after pseudo class in css

related Before and After Pseudo Selectors

related :after PSEUDO-CLASS

how to use after pseudo class in css

Comment

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

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css pseudo-class

Link to this answer
Share Copy Link

Contributed on Jul 17 2021

Magnificent Magpie

0 Answers Avg Quality 2/10

Closely Related Answers

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

:after PSEUDO-CLASS

Comment

/* 
    The element and its pseudo-element are both made translucent using the `opacity` property in order to better visualize how the two are positioned in the demo. 
    By removing the opacity values, you can see a fully opaque eight-point star 
*/
.element {
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    position: relative;
    margin: 100px auto;
}

.element:after {
    content: "";
    position: absolute;
    display: block;
    width: 250px;
    height: 250px;
    background-color: #009966;
    opacity: .8;
    transform: rotateZ(45deg);
}

Popularity 6/10 Helpfulness 2/10 Language css

Source: tympanus.net

Tags: css pseudo-class

Link to this answer
Share Copy Link

Contributed on Oct 19 2023

Darshan T

0 Answers Avg Quality 2/10

how to use after pseudo class in css

Contents

More Related Answers

how to use after pseudo class in css

Closely Related Answers

Before and After Pseudo Selectors

:after PSEUDO-CLASS

Grepper

Documentation

Social

Legal

Contact

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