After Pseudo Element Not Appearing in Code

after pseudo element not appearing in code

It's because the pseudo-element isn't generated if the content value is omitted (since the initial/default value is none).

Specify a content value in order to generate the pseudo-element. A value of '' is sufficient.

.product-show .readMore.less:after {
    content: '';
    background: rgba(255, 255, 255, 0);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
}

Div with CSS content, after pseudo element is not visible

The content property replaces all content within the element. By adding content to a non-pseudo selector, that content will replace the ::before and ::after pseudo selector.

So try doing this using the content property within the ::before and ::after pseudo selectors only.

.demo:before {     content: url('http://placehold.it/350x150')}
.demo:after {    content: 'some text';    display: block;}

<div class="demo"></div>

why the after pseudo element is not showing up

You used color instead of background, and to make it work only on hover, you should hide it first then show it upon hover, such as by using display, opacity, or visibility, though since you want transition, opacity might be the best one.

* {
    margin: 0;
    padding: 0;
    font-family: 'Reem Kufi Fun', sans-serif;
}

section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
    min-height: 100vh;
    width: 100%;
    background-size: cover;
    position: relative;
    background-position: center;
}

#navbar {
    background-color: transparent !important;
    padding: 2% 6%;
}

a {
    color: white !important;
}

#fsta {
    font-size: 2em;
}

li {
    padding-right: 2%;
    position: relative;
    display: inline-block;
    list-style: none;
}

a::after {
    content: "" !important;
    height: 2px !important;
    background: red !important;
    margin: auto !important;
    display: block !important;
    width: 100% !important;
    transition: 1s !important;
    opacity: 0;
}

a:hover::after {
    width: 100% !important;
    opacity: 1;

    cursor: pointer !important;

}

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>house</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="app.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;500;600&family=Reem+Kufi+Fun:wght@400;500;700&display=swap"
        rel="stylesheet">
</head>

<body>
    <section>
        <nav id="navbar" class="navbar navbar-expand-lg bg-light">
            <div class="container-fluid">
                <a id="fsta" class="navbar-brand" href="#">Rb Rooms</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0 justify-content-end flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="#">HOME</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">BEDROOM</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">KITCHEN</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">DINNING</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">BACKYARD</a>
                        </li>

                    </ul>

                </div>
            </div>
        </nav>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</body>

</html>

Pseudo elements not showing

Heres's the corrected answer, since I never showed that I answered it using the button. I just placed it in the top thinking that it would be considered answered. Basically I must've done something wrong the first time somewhere. Hope this helps people who have had problems similar to mines.

.test {
    background: #fff;
    width: 60%;
    margin: 0 0 60px 5%
}

.test:before, .test:after {
    content: "";
    background: url("/imgs/Sprite2.png") repeat-y;
    position: absolute;
    top: 0;
    width: 27px;
    height: 100%
}

.test:before {
    right: 100%;
    background-position: 0 0
}

.test:after {
    left: 100%;
    background-position: -55px 0
}

Pseudo-element not appearing

add display: block to your #base2::before{..} and you will find your circle at the bottom of the rocket.

var element;
function moveSelection(evt) {  element = document.getElementById("base");  switch (evt.keyCode) {    case 65:      element.style.left = (parseInt(element.style.left) - 10) + 'px';      break;    case 68:      element.style.left = (parseInt(element.style.left) + 10) + 'px';      break;    case 87:      element.style.top = (parseInt(element.style.top) - 10) + 'px';      break;    case 83:      element.style.top = (parseInt(element.style.top) + 10) + 'px';      break;  }  element = document.getElementById("base2");  switch (evt.keyCode) {    case 65:      element.style.left = (parseInt(element.style.left) - 10) + 'px';      break;    case 68:      element.style.left = (parseInt(element.style.left) + 10) + 'px';      break;    case 87:      element.style.top = (parseInt(element.style.top) - 10) + 'px';      break;    case 83:      element.style.top = (parseInt(element.style.top) + 10) + 'px';      break;  }}window.addEventListener('keydown', moveSelection);

#base {  background: red;  display: inline-block;  height: 150px;  margin-top: 60px;  position: relative;  width: 70px;  margin-left: 45px;}
#base::before {  border-bottom: 60px solid darkgrey;  border-left: 35px solid transparent;  border-right: 35px solid transparent;  content: "";  height: 0;  left: 0;  position: absolute;  top: -60px;  width: 0;}
#base::after {  border-bottom: 120px solid #FFA300;  border-left: 80px solid transparent;  border-right: 80px solid transparent;  height: 0;  margin-top: 30px;  margin-left: -45px;  content: "";  position: absolute;  z-index: -1;}
#base2 {  clip-path: polygon(38% 0, 62% 0, 60% 20%, 70% 45%, 80% 75%, 100% 100%, 0 100%, 20% 75%, 30% 45%, 40% 20%);  width: 70px;  height: 25px;  background: grey;  margin-top: 210px;  margin-left: 45px;}#base2::before {  width: 50px;  height: 50px;  content: "";  border-radius: 50%;  background: black;  z-index: 2;  display: block;}

<div id="base" name="char" style="top: 0; left: 0; position: absolute;"></div><div id="base2" name="char" style="top: 0; left: 0; position: absolute;"></div>

CSS :before and :after not working?

If you want :before and :after to work, you need to give them content, otherwise they don't really 'exist'. The easiest thing to do is, in the css, set content: '' for both pseudoelements.

CSS pseudo element not working

You can't use pseudo elements (::before and ::after) in img tag (at least for now).

See what W3C specs says:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

So you have to apply the pseudo element to the parent instead.

Also you need to use position:relative in the parent because you are applying position:absolute in pseudo element. With that you will keep the pseudo element in the flow with the DOM.

Note there is a few changes in your CSS

body {  margin: 0}#profilePicture {  width: 200px;  margin-left: 25px;  position: relative;  border: solid #070707;  border-width: 1px 1px 0 1px}#pf {  display: block;}#profilePicture::after {  content: '';  position: absolute;  width: 200px;  height: 5px;  background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707);  background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707);  background: -o-linear-gradient(left, #070707, #a1a1a1, #070707);  background: linear-gradient(to right, #070707, #a1a1a1, #070707);  bottom: 0;  left: 0;}

<div id="profilePicture">  <img id="pf" src="//dummyimage.com/200x200&text=image"></div>

After Pseudo Element Not Appearing in Code