1

ABOUT PROBLEM

I tried to make hamburger-menu from YouTube tutorial. In 6.23 minute we had a problem with displaying ::after and ::before element - without display: flex on .hamburger-menu class we don't see black spaces. In tutorial I heard we have the problem because .hamburger-menu is inline by default. I don't understand why we can see black elements only when parent class is flex or grid (I check) or when I fill content property with the text. Even if I set it to block element I don't see the change.

CODE

.hamburger-menu{
   display:flex;
}

.hamburger-menu:after,
.hamburger-menu:before,
.hamburger-menu input{
    width:60px;
    height:7px;
    content:"";
    background-color:rgb(30,30,30);
    border-radius:10000px; 
}
<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <label class="hamburger-menu">
       <input type="checkbox"></label>
    </label>
</body>
</html>
Md. Rakibul Islam
  • 2,140
  • 1
  • 7
  • 14
Michael
  • 83
  • 4
  • 4
    Your pseudo elements (which should be written as `::before` and `::after`, btw. - double colon) themselves are inline by default - and therefor width and height _must_ not have any effect, and without any `content` property specified either, there simply _is_ nothing to render. Making the label a flex container, makes the pseudo elements themselves flex items, and on _those_ width and height are allowed to have an effect. – CBroe Aug 10 '23 at 08:27
  • Thank you for answer. Now i understand :) – Michael Aug 10 '23 at 08:35
  • You have malformed HTML: You have 2 `` tags but only 1 ` – Dai Aug 10 '23 at 10:30

0 Answers0