?
文章來源地址http://www.zghlxwxcb.cn/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;
}文章來源：http://www.zghlxwxcb.cn/news/detail-729116.html
到了這里，關于a標簽設置下劃線動畫的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
