從左以及右 或者 右到左
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
display: flex;
position: absolute;
width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li {
position: relative;
padding: 20px;
font-size: 24px;
color: #000;
line-height: 1;
transition: 0.2s all linear;
cursor: pointer;
}
li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
}
li:hover::before {
width: 100%;
top: 0;
left: 0;
transition-delay: 0.1s;
border-bottom-color: #000;
z-index: -1;
}
li:hover ~ li::before {
left: 0;
}
li:active {
background: #000;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li>不可思議的CSS</li>
<li>導航欄</li>
<li>光標小下劃線跟隨</li>
<li>PURE CSS</li>
<li>Nav Underline</li>
</ul>
</body>
</html>
以及2端延伸效果
方法
通過css3的transform和transition屬性來實現
代碼
下劃線從左到右效果
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>下劃線動畫</title>
<style>
/*先把a的原有下劃線樣式給清除*/
a,a:link,a:visited,a:focus{
text-decoration:none;color:#000;
}
/*設置a的定位，給我們自己編寫的下劃線一個定位參考*/
.left-to-right{
position:relative;
}
/*使用僞類給a下面添加下劃線*/
/*css3爲了區別僞類選擇器把::改爲:,使用:也會自動轉爲::*/
.left-to-right::after{
content:'';
display:block;
/*開始時候下劃線的寬度爲0*/
width:0;
height:3px;
position:absolute;
left:0;
bottom:-10px;
background:#000;
/*這裏我們設定所有改變都有動畫效果，可以自己指定樣式纔有動畫效果*/
transition:all 0.3s ease-in-out;
}
.left-to-right:hover::after{
width:100%;
}
</style>
</head>
<body>
<a href="#" class="left-to-right">鼠標經過從左向右延伸的下劃線</a>
</body>
</html>
- 下劃線從右到左效果
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>下劃線動畫</title>
<style>
a,a:link,a:visited,a:focus{
text-decoration:none;color:#000;
}
.right-to-left{
position:relative;
}
.right-to-left::after{
content:'';
display:block;
width:0;
height:3px;
position:absolute;
right:0; /*區別就是開始時在右邊*/
bottom:-10px;
background:#000;
transition:all 0.3s ease-in-out;
}
.right-to-left:hover::after{
width:100%;
}
</style>
</head>
<body>
<a href="#" class="right-to-left">鼠標經過從右向左延伸的下劃線</a>
</body>
</html>
- 下劃線從中間向兩端延伸效果
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>下劃線動畫</title>
<style>
a,a:link,a:visited,a:focus{
text-decoration:none;color:#000;
}
.center-to-head{
position:relative;
}
.center-to-head::after{
content:'';
display:block;
/*開始時候下劃線的寬度爲100%*/
width:100%;
height:3px;
position:absolute;
bottom:-10px;
background:#000;
transition:all 0.3s ease-in-out;
/*通過transform的縮放scale來讓初始時x軸爲0*/
transform: scale3d(0,1,1);
/*將座標原點移到元素的中間，以原點爲中心進行縮放*/
transform-origin:50% 0;
}
.center-to-head:hover::after{
/*鼠標經過時還原到正常比例*/
transform:scale3d(1,1,1);
}
</style>
</head>
<body>
<a href="#" class="center-to-head">鼠標經過從中間向兩端延伸的下劃線</a>
</body>
</html>