Currently, I am working on a VUEJS application and have encountered an issue with one of the components. The component applies an underline to each 'p' element with the class 'animal-subtitle' using CSS. While this effect works fine in other parts of the application, it seems to be fixed in one position within this specific component instead of being positioned under each 'p' element.
Below is the HTML code:
<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>
... (additional HTML code)
Here is the corresponding CSS:
.animal-images {
display: flex;
justify-content: space-around;
}
.column img {
display: block;
width: 365px;
height: 244px;
object-fit: cover;
}
.animal-subtitle {
... (CSS styles)
}
... (other CSS styles)
For a demonstration of the behavior, you can view the CodePen link here: https://codepen.io/CharlieJS/pen/vYGKzKv
Thank you for taking the time to review and provide assistance with this issue.