a标签下划线从中间向两边散开
今天在做主题 SimpleWrite 中文章内文字样式的显示的时候,需要给超链接 <a>
标签做一个样式美化,受到 joe 主题的启发,于是便决定做一个类似的 效果,鼠标放在标签上,下面有一条线从中间向两边展开的效果。
实现
使用:hover
和 :after
伪类选择来进行实现,用absolute
绝对定位 ,将其定位到底部,然后用一个过渡动画,实现从中间向两边展开的效果。
下面是css样式代码:
.markdown a {
position: relative;
text-decoration: none;
color: #8094dd;
}
.markdown a:after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
background-color: #8094dd;
}
.markdown a:hover:after {
width: 100%;
left: 0;
}
评论 (0)