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;
}