0

So I am trying to build a burger icon with css and only one element. But I stuck at the following situation:

  • the burger icon has 3 lines
  • I can only display 2 lines using ::before and ::after

So I did some googling and came to this site on the w3 page. Here it's stated that you can use something like ::before(2) to use multiple ::before pseudo classes in one element. So I wrote this code which is not working (it's sass):

.burger {
      position: relative;
      width: 75px;
      height: 75px;
      background-color: #333;
      border-radius: 5px;
      &::before {
          position: absolute;
          content: '';
          top: 15px;
          left: 10px;
          width: 55px;
          height: 5px;
          background-color: white;
          border-radius: 5px;
      }
      &::before(2) {
          position: absolute;
          content: ' ';
          top: 25px;
          left: 10px;
          width: 50px;
          height: 5px;
          background-color: white;
      }
      &::before(3) {
          position: absolute;
          content: '   ';
          top: 35px;
          left: 10px;
          width: 50px;
          height: 5px;
          background-color: white;
      }
  }
<!DOCTYPE html>
<html>
  <body>
    <div class="burger"></div>
  </body>
</html>

As you can see it does not show any line.
If I comment the ::befores with the curved brackets it shows the first line so this is working.

SUBHUMAN
  • 368
  • 7
  • 16
  • 2
    That was just a _proposal_. No browser supports it. – Mr Lister Feb 04 '16 at 11:57
  • A specification can define a feature, but it's useless if nobody actually implements the feature. Just because a W3C spec exists for it doesn't mean it will work. – BoltClock Feb 04 '16 at 12:09

0 Answers0