将鼠标悬停在不同元素上（：before，：after）不起作用

Question

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

nav {
  height: 50px;
  padding: 0 2.5%;
  position: relative;
  border: 1px solid red;
}

.menu {
  width: 20px;
  height: 3px;
  background-color: #000;
  border-radius: 24px;
  transition: .3s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.menu:before,
.menu:after {
  content: '';
  position: absolute;
  height: 3px;
  background-color: #000;
  border-radius: 24px;
}

.menu:before {
  width: 30px;
  top: -8px;
}

.menu:after {
  width: 25px;
  top: 8px;
}

.menu:hover {
  width: 30px;
}

<nav>
    <a href="#" class="menu"></a>
</nav>

嗨，

当我将鼠标悬停在它们上方时，如何将所有元素（同时：: before，：after）的宽度更改为30px？

感谢您的支持。我真的很感激。

亲爱的问候， 卡尔·赫拉斯尼格