Solution 1 :

Just try to replace className by class.

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;
      <img src="./assets/pokeball.svg" alt="pokedex">
      <span className="red-button"></span>


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


Leave a Reply

Your email address will not be published. Required fields are marked *