css实现特殊效果

二级导航翻转效果：
/*html*/
<ul>
<li>111</li>
<li>222</li>
<li>333
<ol>
<li>444</li>
<li>555</li>
<li>666</li>
</ol>
</li>
</ul>
/*css*/

li{
list-style: none;
margin-right: 30px;
}
ul>li{
float: left;
}
ul>li:hover{
color:orange;
}
ul,ol{
padding: 0;
margin: 0;
}
ol>li{
opacity: 0;
transition: all 2s;
transform: rotatey(180deg);
color: blue;
background: gainsboro;
}
ul>li:last-child:hover ol>li:first-child{
opacity: 1;
transform: none;
transition-delay: 0s;
}
ul>li:last-child:hover ol>li:nth-child(2){
opacity: 1;
transform: none;
transition-delay:200ms;
}
ul>li:last-child:hover ol>li:last-child{
opacity: 1;
transform: none;
transition-delay: 400ms;
}

从文字下方中间添加下划线:
/*html*/
<ul class="box">
<li>ddd</li>
<li>ff</li>
<li>ggg</li>
</ul>
/*css*/
.box li{
list-style: none;
float: left;
text-align: center;
margin-left: 10px;
position: relative;
padding-bottom: 20px;
}
从文字下方左边添加下划线:
/*html*/
<ul class="box1">
<li>ddd</li>
<li>ff</li>
<li>ggg</li>
</ul>
/*css*/
.box1 li{
list-style: none;
float: left;
width: 80px;
text-align: center;
margin-left: 100px;
position: relative;
padding-bottom: 20px;
/*background: red;*/
}
.box1 li:before{
content:"";
position:absolute ;
/*border: 2px solid red;*/
width: 0;
left:-100%;
bottom: 0;
transition: all linear 2s;
/*display: none;*/
}
.box1 li:hover:before{
border: 2px solid red;
width:100%;
left:0;