悬停效果匹配 Div 的宽度，而不是文本

Question

我有一组位于 div 中的链接，我希望动画颜色效果与悬停时链接文本的宽度相匹配。现在，所有的悬停效果都一样。

我尝试将宽度设置为 100%，但它似乎要么一律变长要么变短。

Here is my codepen.

这里是相关代码：

/*left navigation animation effect*/

.menu {
	position: relative;
	z-index: 10;
  padding: 25px;
  margin-top:10px;
}

.menu__item {
	position: relative;
  text-align: left;
	display: block;
	outline: none;
	margin: 0 0 1.5em;
	line-height: 1;
}

.menu__item-name,
{
	position: relative;
	display: inline-block;
}

.menu__item-name {
	font-size: 1.25em;
}


.menu--adsila {
	font-size: 1.15em;
	font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  text-decoration: none;

}
.menu--adsila p {
  color: black;
  text-align: left;
  text-transform: none;
  padding-bottom:20px;
}
.menu--adsila a {
	color: grey;
  text-decoration: none;
}

.menu--adsila .menu__item {
	margin: 0 0 1em;
}

.menu--adsila .menu__item-name {
	padding: 0.2em 0.8em;
	line-height: 2.4;
	transition: color 0.6s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item-name::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 50%;
	left: 0;
	bottom: 0;
	opacity: 0.2;
	transform: scale3d(0,1,1);
	transform-origin: 0% 50%;
	transition: transform 0.6s;
	transition-timing-function: cubic-bezier(0.8,.03,0.25,1);
}

.menu--adsila .menu__item-label::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 25%;
	height: 1px;
	left: 0.05em;
	top: 1.25em;
	opacity: 0.3;
	transform: scale3d(0,1,1);
	transform-origin: 100% 50%;
	transition: transform 0.5s;
	transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}

.menu--adsila .menu__item:nth-child(1) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(1) .menu__item-label::before {
	background: lightblue;
}

.menu--adsila .menu__item:nth-child(2) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(2) .menu__item-label::before  {
	background: lightgreen;
}

.menu--adsila .menu__item:nth-child(3) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(3) .menu__item-label::before  {
	background: lightpink;
}

.menu--adsila .menu__item:nth-child(4) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(4) .menu__item-label::before  {
	background: turquoise;
}

/* Hover */

.menu--adsila .menu__item:nth-child(1):hover,
.menu--adsila .menu__item:nth-child(1):focus {
	color: lightblue;
}

.menu--adsila .menu__item:nth-child(2):hover,
.menu--adsila .menu__item:nth-child(2):focus {
	color: lightgreen;
}

.menu--adsila .menu__item:nth-child(3):hover,
.menu--adsila .menu__item:nth-child(3):focus {
	color: lightpink;
}

.menu--adsila .menu__item:nth-child(4):hover,
.menu--adsila .menu__item:nth-child(4):focus {
	color: turquoise;
}
.menu--adsila .menu__item:hover .menu__item-name::before,
.menu--adsila .menu__item:focus .menu__item-name::before,
.menu--adsila .menu__item:hover .menu__item-label::before,
.menu--adsila .menu__item:focus .menu__item-label::before {
	transform: scale3d(1,1,1);
}

.menu--adsila .menu__item:hover .menu__item-label,
.menu--adsila .menu__item:focus .menu__item-label {
	transform: translate3d(0,0,0);
}

.menu--adsila .menu__item:hover .menu__item-label::before,
.menu--adsila .menu__item:focus .menu__item-label::before {
	transition-timing-function: ease;
	transform-origin: 0% 50%;
}

<div id="left" class="column">
    <div class="bottom">
      <nav class="menu menu--adsila" id="navbar">

        <a class="menu__item" href="#">
          <span class="menu__item-name">super long</span>
        </a>
        <a class="menu__item" href="#">
          <span class="menu__item-name">short</span>
        </a>
        <a class="menu__item" href="#">
          <span class="menu__item-name">link three</span>
        </a>
        <a class="menu__item" href="#">
          <span class="menu__item-name">link four</span>
        </a>
       
    </div>
  </div>
  </div>

感谢您的帮助！

Answer 1

将position: relative 添加到.menu--adsila .menu__item-name

/*left navigation animation effect*/

.menu {
  position: relative;
  z-index: 10;
  padding: 25px;
  margin-top: 10px;
}

.menu__item {
  position: relative;
  text-align: left;
  display: block;
  outline: none;
  margin: 0 0 1.5em;
  line-height: 1;
}

.menu__item-name,
{
  position: relative;
  display: inline-block;
}

.menu__item-name {
  font-size: 1.25em;
}

.menu--adsila {
  font-size: 1.15em;
  font-family: 'Open Sans Condensed', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}

.menu--adsila p {
  color: black;
  text-align: left;
  text-transform: none;
  padding-bottom: 20px;
}

.menu--adsila a {
  color: grey;
  text-decoration: none;
}

.menu--adsila .menu__item {
  margin: 0 0 1em;
}

.menu--adsila .menu__item-name {
  padding: 0.2em 0.8em;
  line-height: 2.4;
  transition: color 0.6s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  position: relative;
}

.menu--adsila .menu__item-name::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 50%;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  transform: scale3d(0, 1, 1);
  transform-origin: 0% 50%;
  transition: transform 0.6s;
  transition-timing-function: cubic-bezier(0.8, .03, 0.25, 1);
}

.menu--adsila .menu__item-label::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 25%;
  height: 1px;
  left: 0.05em;
  top: 1.25em;
  opacity: 0.3;
  transform: scale3d(0, 1, 1);
  transform-origin: 100% 50%;
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.menu--adsila .menu__item:nth-child(1) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(1) .menu__item-label::before {
  background: lightblue;
}

.menu--adsila .menu__item:nth-child(2) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(2) .menu__item-label::before {
  background: lightgreen;
}

.menu--adsila .menu__item:nth-child(3) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(3) .menu__item-label::before {
  background: lightpink;
}

.menu--adsila .menu__item:nth-child(4) .menu__item-name::before,
.menu--adsila .menu__item:nth-child(4) .menu__item-label::before {
  background: turquoise;
}


/* Hover */

.menu--adsila .menu__item:nth-child(1):hover,
.menu--adsila .menu__item:nth-child(1):focus {
  color: lightblue;
}

.menu--adsila .menu__item:nth-child(2):hover,
.menu--adsila .menu__item:nth-child(2):focus {
  color: lightgreen;
}

.menu--adsila .menu__item:nth-child(3):hover,
.menu--adsila .menu__item:nth-child(3):focus {
  color: lightpink;
}

.menu--adsila .menu__item:nth-child(4):hover,
.menu--adsila .menu__item:nth-child(4):focus {
  color: turquoise;
}

.menu--adsila .menu__item:hover .menu__item-name::before,
.menu--adsila .menu__item:focus .menu__item-name::before,
.menu--adsila .menu__item:hover .menu__item-label::before,
.menu--adsila .menu__item:focus .menu__item-label::before {
  transform: scale3d(1, 1, 1);
}

.menu--adsila .menu__item:hover .menu__item-label,
.menu--adsila .menu__item:focus .menu__item-label {
  transform: translate3d(0, 0, 0);
}

.menu--adsila .menu__item:hover .menu__item-label::before,
.menu--adsila .menu__item:focus .menu__item-label::before {
  transition-timing-function: ease;
  transform-origin: 0% 50%;
}

<div id="left" class="column">
  <div class="bottom">
    <nav class="menu menu--adsila" id="navbar">

      <a class="menu__item" href="#">
        <span class="menu__item-name">super long</span>
      </a>
      <a class="menu__item" href="#">
        <span class="menu__item-name">short</span>
      </a>
      <a class="menu__item" href="#">
        <span class="menu__item-name">link three</span>
      </a>
      <a class="menu__item" href="#">
        <span class="menu__item-name">link four</span>
      </a>

  </div>
</div>
</div>