添加样式到伪元素

Question

如何向pseudo元素添加样式。我想给第一个元素宽度：40％。

<div class="nav-bar">
      <div class="menu-bar">
          <div class="menu-toggle">
          </div>
      </div>
  </div>

CSS

.menu-bar {
  position: absolute;
  padding: 0.8em;
  cursor: pointer;
}

.menu-toggle, .menu-toggle::after, .menu-toggle::before{
 content: '';
 display: block;
 width: 2em;
 height: 2px;
}

我试过但它不起作用。

.menu-bar:hover:after{
 width: 40%;
}

.menu-bar:hover .menu-toggle::after{
 width: 40%;
}

.menu-bar:hover::after{
 width: 40%;
}

由于