CSS里取消hover效果,CSS3实现动态删除线式hover效果

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);

body {

display: table;

width: 100%;

height: 100vh;

margin: 0;

background: #333;

font-family: 'Roboto Condensed', sans-serif;

font-size: 20px;

font-weight: 300;

letter-spacing: 5px;

text-transform: uppercase;

color: #fff;

}

.container {

display: table-cell;

vertical-align: middle;

text-align: center;

width: 600px;

}

ul {

list-style: none;

margin: 0;

padding: 0;

}

li {

display: inline-block;

padding: 0 20px;

}

span {

position: relative;

display: block;

cursor: pointer;