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;
 }
  <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

By

Leave a Reply

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