为什么 css 下划线效果不适用于每个元素？

Question

我在 VUEJS 中开发的应用程序中有一个组件，其中，使用 css，我在每个 'p' 和 class '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);
}

我还留给你一个代码笔link，我在其中重现了行为

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

非常感谢大家花时间和帮助

Answer 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
}

Answer 2

请试试这个

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

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

同时添加父元素position:relative;

.animal-subtitle {
     position:relative;
}

为什么 css 下划线效果不适用于每个元素？

Why does a css underline effect not apply to every element?

css

hover

css-transitions

vue.js