添加底線到錨點使用僞類後在css

嘗試顯示在底部的導航錨點的行之前，我嘗試了很多解決我的問題，但沒有任何有關這個問題的解決方案。我想補充的底線與CSS的幫助下使用pasudo班後添加底線到錨點使用僞類後在css

<html> 
    <head> 
     <style> 
     body,ul,li,a,nav{ 
    margin: 0; 
    padding: 0; 
} 

nav { 
    background-color: #dadada; 
} 

.menu-items { 
    list-style: none; 
    text-align: center; 
} 

.menu-items a { 
    float: left; 
    text-decoration: none; 
    padding:10px 10px; 
    color: #fff; 
} 
.header-menu li > a::after { 
     border-color: red; 
     border-style: solid; 
     position: absolute; 
    top: 20%; 
    left: 0; 
    width: 50%; 
    height: 0px; 
    /*background: rgba(0,0,0,0.1);*/ 
    content: ''; 
    opacity: 0; 
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 
    -moz-transition: opacity 0.3s, -moz-transform 0.3s; 
    transition: opacity 0.3s, transform 0.3s; 
    -webkit-transform: translateY(20px); 
    -moz-transform: translateY(20px); 
    transform: translateY(20px); 

} 
.header-menu li > a:hover::after { 
    opacity: 1; 
    -webkit-transform: translateY(1px); 
    -moz-transform: translateY(1px); 
    transform: translateY(1px); 
} 


.menu-items li { 
    display: inline-block; 
} 
    </style> 
    </head> 
    <body> 
     <nav class="header-menu"> 
      <ul class="menu-items"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Animal</a></li> 
       <li><a href="#">Birds</a></li> 
       <li><a href="#">Sports</a></li> 
       <li><a href="#">Address</a></li> 
       <li><a href="#">News</a></li> 
      </ul> 
     </nav> 
    </body> 
</html>

來源

2016-05-16 Hamza Qaisrani

添加position: relative到.header-menu li > a或.menu-items a

相對此關鍵字規定了所有元素的和過渡就好像該元素未被定位，然後調整該元素的位置，而不改變佈局（並且因此爲元素留下空位一直沒有定位）。位置的影響：相對於表--組，錶行，表 - 列，表格單元和表標題元素是未定義的。

然後在.header-menu li > a::after改變top: 50%;到top: 100%;

現場演示

body, 
 
ul, 
 
li, 
 
a, 
 
nav { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
nav { 
 
    background-color: #dadada; 
 
} 
 
.menu-items { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 
.menu-items a { 
 
    float: left; 
 
    text-decoration: none; 
 
    padding: 10px 10px; 
 
    color: #fff; 
 
    position: relative/*this will wrap pseudo elements*/ 
 
} 
 
.header-menu li > a::after { 
 
    border-color: red; 
 
    border-style: solid; 
 
    position: absolute; 
 
    top: 100%; /*because we want it to be at the bottom of the anchor*/ 
 
    left: 10px; /*10px because anchor has a padding of 10px*/ 
 
    width: 50%; 
 
    height: 0px; 
 
    /*background: rgba(0,0,0,0.1);*/ 
 
    content: ''; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; 
 
    -moz-transition: opacity 0.3s, -moz-transform 0.3s; 
 
    transition: opacity 0.3s, transform 0.3s; 
 
    -webkit-transform: translateY(20px); 
 
    -moz-transform: translateY(20px); 
 
    transform: translateY(20px); 
 
} 
 
.header-menu li > a:hover::after { 
 
    opacity: 1; 
 
    -webkit-transform: translateY(1px); 
 
    -moz-transform: translateY(1px); 
 
    transform: translateY(1px); 
 
} 
 
.menu-items li { 
 
    display: inline-block; 
 
}

<nav class="header-menu"> 
 
    <ul class="menu-items"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Animal</a> 
 
    </li> 
 
    <li><a href="#">Birds</a> 
 
    </li> 
 
    <li><a href="#">Sports</a> 
 
    </li> 
 
    <li><a href="#">Address</a> 
 
    </li> 
 
    <li><a href="#">News</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2016-05-16 13:46:04

我得一分形成你的答案是在HTML中的每一件事情首先定位相對或依賴在你的結構化 –

不！在父項上的相對位置可以讓您控制絕對位置內的子元素。默認值是position：static; –

添加底線到錨點使用僞類後在css

回答

相關問題