Just try to replace className by class.
Solution 1 :
Problem :
I’m trying to draw additional (mock) buttons onto my page with plain CSS, but my span element is not showing up. I’ve tried giving it a display: block; and I’ve also tried positioning it absolutely, but nothing seems to work. And out of those two ways, which is the preferred/most clear method?
header {
position: relative;
display: flex;
justify-content: space-around;
border-bottom: 6px solid black;
padding: 15px 0 10px 0;
}
img {
width: 43px;
height: 43px;
}
.red-button {
background: yellow;
width: 50px;
height: 50px;
}
header:before {
content: "";
position: absolute;
z-index: 1;
top: 74px;
width: 100%;
border-bottom: 6px solid maroon;
}
header:after {
content: "";
position: absolute;
top: 0;
width: 100%;
border-bottom: 6px solid $light-red;
} <body>
<header>
<img src="./assets/pokeball.svg" alt="pokedex">
<span className="red-button"></span>
</header>
</body>Comments
Comment posted by yerme
Are you trying to render plain css with “className” instead of “class”?
Comment posted by Bumhan Yu
Two questions: 1. You used
Comment posted by ahmednawazbutt
Good job. A little explanation wont hurt anybody.
Comment posted by Lariel
When you are working with html and css, and need to define a style that will be reusable, this is a