How can I make the check button work in CSS?-CodePudding

I've tried to design the checkbtn using css but its failing to work. The check psuedo elements and the hover elements seem not to be working, am actually trying to make a hamburger button for the navigation any ideas on how to fix this code?

.checkbtn {
  display: block;
  line-height: 40px;
  font-weight: 500;
  margin-top: 20px;
  margin-right: 30px;
}

.header .navbar {
  flex: 1;
}

.header .navbar ul {
  position: fixed;
  background-color: darkgreen;
  background-size: cover;
  width: 100%;
  height: 50vh;
  top: 72px;
  right: -100%;
  transition: all .5s;
  text-align: center;
  list-style: none;
}

.header .navbar ul li {
  display: block;
  margin-top: 35px;
}

.header .navbar ul li a {
  text-decoration: none;
  margin: 20px;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}

*these hover psuedos don't work as well.*
 .navbar ul li a:hover,
a.after {
  background-color: none;
  color: darkred;
}


/* This psuedo element is failing to work */

#check:checked~.ul {
  right: 0;
}

<div >
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="about.html">About</a>
    </li>
  </ul>
</div>
<div >
  <label for="check" >&#9776;</label>
  <input type="checkbox" id="check">
</div>

CodePudding user response：

.navbar ul li a:hover ,a.after{

in this line you have a.after - this is looking for an anchor tag "a" with a class of "after". If you meant to use the psuedo-element :after it should be a::after in CSS3 (or a:after in CSS2 - both will work) as mentioned here: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

For the checkbox you have:

#check:checked ~ .ul{

You are using the General Sibling Combinator "~". This is what MDN says about this:

The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

In your HTML there are no unordered list tags after the checkbox. This means CSS doesn't find any elements to style. The checkbox needs to be before the tags which you want to affect and within the same parent tag (ie. they need to be "siblings").

Note: You can still position the checkbox to appear elsewhere using CSS