如何解决为什么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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。