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

Question

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

我试过将宽度设置为 100%，但它似乎总是变长或变短。

这里是相关代码：

/*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>

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

Hover Effect Matches Width of Div, Not Text

css

navigation

highlight

hyperlink

hover