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

问题描述

我在VUEJS中开发的应用程序中有一个组件，在其中，我使用CSS在下划线上对类为“动物字幕”的每个“ p”应用下划线。 我在应用程序中使用它时没有任何问题，但是我不知道为什么该组件始终以固定的方式显示在同一位置，而不是位于每个“ 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

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

解决方法

使用绝对位置时，需要使要使其与position: relative对齐的父级

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

,

请尝试

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

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

还添加父元素position:relative;

.animal-subtitle {
     position:relative;
}