为什么 css 下划线效果不适用于每个元素？ [复制]答案

【问题标题】：Why does a css underline effect not apply to every element? [duplicate]为什么 css 下划线效果不适用于每个元素？ [复制]
【发布时间】：2020-12-07 10:57:27
【问题描述】：

我在 VUEJS 中开发的应用程序中有一个组件，在该组件中，我使用 css 将下划线应用于每个 'p' 类 'animal-subtitle' 。这是我在应用程序中毫无问题地使用的效果，但我不知道为什么这个组件总是以固定方式显示在同一个地方，而不是定位在每个“p”下方。

这是我的html

<div class="animal-images">              
<div class="column">
                <label>
                  
                  <img src="https://picsum.photos/300/200?image=244" />
                </label>
                <p class="animal-subtitle">fill the info</p>                
              </div>
              <div class="column">
                <label>
                  
                  <img src="https://picsum.photos/300/200?image=244" />
                </label>
                <p class="animal-subtitle">check the service</p>                
              </div>
              <div class="column">
                <label>
                  
                    <img src="https://picsum.photos/300/200?image=244" />
                </label>
                <p class="animal-subtitle">visit the shop</p>                
              </div>
            </div>
</div>

这是我的css

.animal-images {
  display: flex;
  justify-content: space-around;
}
.column img {
  display: block; /* removes the spacing underneath the image */
  width: 365px; /* sets the width to the parents width */
  height: 244px; /* set the height to the parents height */
  object-fit: cover; /* prevents image from stretching */
}

.animal-subtitle {
  display: flex;
  justify-content: center;
  font-family: 'RalewayRegular';
  font-size: 36px;
  font-weight: bold;
  color: #666B74;
  cursor: pointer;
}

.animal-subtitle:before {
  content: '';
  position: absolute;
  width: 4%;
  height: 3px;
  bottom: 1%;
  left: 35%;
  background: #D53865;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}

.animal-subtitle:hover:before,
.animal-subtitle:focus:before {
  visibility: visible;
  transform: scaleX(1);
}

我还留给你一个 codepen 链接，我可以在其中重现该行为

https://codepen.io/CharlieJS/pen/vYGKzKv

非常感谢大家的宝贵时间和帮助

【问题讨论】：

标签： css vue.js hover css-transitions

【解决方案1】：

使用绝对位置时，您需要将要对齐的父级设置为position: relative

.animal-subtitle {
  display: flex;
  justify-content: center;
  font-family: 'RalewayRegular';
  font-size: 36px;
  font-weight: bold;
  color: #666B74;
  cursor: pointer;
  position: relative
}

【讨论】：

非常感谢！我正在引导自己通过使用相同 css 的其他组件，我被阻止并且我没有看到我的错误

【解决方案2】：

请试试这个

请更改width:100%和left:0%

.animal-subtitle:before {
    width: 100%;
    left: 0%;
}

同时添加父元素position:relative;

.animal-subtitle {
     position:relative;
}

【讨论】：