css - 如此特效怎么做的

问题描述

问 题

http://semantic-ui.com/introduction/getting-started.html
里面的链接鼠标focus/hover都会有出现下划线的特效，翻翻css找不到，求指导

解决方案

借助伪元素实现的，使用了CSS3 transform: scaleX()
具体:

a {
    position: relative;
}

a::before {
    content: '';
    position: absolute;
    top: auto;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color:#4183C4;
    -webkit-transition: all 0.2s;
    -webkit-backface-visibility: hidden;
    transition: all 0.2s;
    backface-visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);     
}

a:hover::before, a:focus::before {
    background-color: #2C76BF;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

这篇关于css - 如此特效怎么做的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！