cssmodal.less

//view/hide modal button

#tmodal {
  appearance:none;
  width:30px;
  height:30px;
  background-color:@coloroff;
  z-index:2;
  float:right;
  margin-top:20px;
  margin-right:20px;
  &::after {
    content:attr(data-hide);
    font-size:17px;
    color:#ffffff;
    font-weight:bold;
    position:absolute;
    margin-left:9px;
    margin-top:5px;
    transition:background-color .4s linear;
  }
  &:checked {
    background-color:@coloron;
    transition:background-color .3s linear;
  }
  &:checked::after {
    content:attr(data-show);
    //changed margin not necessary
    margin-top:2px;
  }
  &:checked:hover {
    background-color:@coloroff;
    transition:background-color .3s linear;
  }
  &:hover {
    background-color:@coloron;
    transition:background-color .3s linear;
  }
}

//modal

.modal {
  z-index:1;
  padding:20px;
  width:60%;
  height:60%;
  background-color:@colormodal;
  margin:0 auto;
  opacity:0;
  -webkit-user-select:none;
  h1 {
    text-align:center;
  }
}

//toggle modal

#tmodal:checked ~ .modal{
  opacity:1;
  transition:opacity 0.2s linear;
}

examplemarkup.html

<input id="tmodal" type="checkbox" data-show="¿" data-hide="?" checked/>
<div class="modal">
  <h1>This is an awesome Modal</h1>
  <p>Cat ipsum dolor sit amet, hopped up on goofballs why must they do that so swat at dog but intrigued by the shower. Sleep on keyboard climb leg. Nap all day cat snacks and behind the couch and intrigued by the shower yet sleep on keyboard.</p>
  <p>Missing until dinner time chew foot for flop over mark territory. Chew iPad power cord nap all day, and give attitude so nap all day but use lap as chair. Chase imaginary bugs climb leg for attack feet.</p>
</div>