文章来源地址https://www.toymoban.com/news/detail-729116.html
<div class="friendlyLink">
<div v-for="(value, key) in friendlyLinkObj" :key="key">
<div>{{key}}:
<a class="friendlyLink-a" :href="value" target="_blank"> {{ value }} </a></div>
</div>
</div>
friendlyLinkObj: {
csdn: "link...",
github: "link..."
}
/* 基础样式 */
a {
position: relative;
color: #333;
text-decoration: none;
}
/* 伪类样式 */
a::before {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: #333;
opacity: 0;
transition: all 0.5s ease-in-out;
}
/* 悬停样式 */
a:hover::before {
width: 100%;
opacity: 1;
}文章来源：https://www.toymoban.com/news/detail-729116.html
到了这里，关于a标签设置下划线动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
