<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<title>菜单标签删除线样式</title><script async src="http://c.cnzz.com/core.php"></script>
<style>
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;
}
span:before, span:after {
content: '';
position: absolute;
width: 0%;
height: 1px;
top: 50%;
margin-top: -0.5px;
background: #fff;
}
span:before {
left: -2.5px;
}
span:after {
right: 2.5px;
background: #fff;
-webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
span:hover:before {
background: #fff;
width: 100%;
-webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
span:hover:after {
background: transparent;
width: 100%;
-webkit-transition: 0s;
transition: 0s;
}
</style>
</head>
<body>
<body>
<div class="container">
<ul>
<li><span>Home</span></li>
<li><span>About us</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</body>
</body>
</html>
转载于:https://my.oschina.net/mfeng/blog/749920