Question

所以我试图用css和只有一个元素构建一个汉堡图标。但我坚持以下情况：

汉堡图标有3行
我只能使用:: before和:: after

所以我做了一些谷歌搜索并来到this site on the w3 page.这里声明你可以使用:: before（2）之类的东西在一个元素中使用multiple :: before伪类。所以我写了这段不起作用的代码（这是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>

如你所见，它没有显示任何一行如果我用弯曲的括号对:: befores进行注释，它会显示第一行，这样就可以了。

遵循w3c规则的多个::之前的伪类

0 个答案: