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

Question

I have a component in the application that I am developing in VUEJS, in which, with css, I apply an underline to each of the 'p' with class 'animal-subtitle' . It's an effect that I'm using along the application without any problem, but I don't know why this component is showing in a fixed way in the same place always, instead of being positioned under each of the 'p'.

here is my 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>

And here's my 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);
}

I also leave you a codepen link in which I reproduce the behavior

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

thank you all very much in advance for your time and help

Answer 1

When using position absolute you need to make the parent that you want to align it to 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

Please try this

Please change width:100% and left:0%

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

Also add parent element position:relative;

.animal-subtitle {
     position:relative;
}