CSSの擬似クラスを使用してアンカーに一番下の行を追加

私は問題を解決するために多くの試みをしたが、この問題については何も解決しないで、ナビゲーションアンカーの下に行を表示しようとしています。私は 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

.header-menu li > aにposition: relativeを追加または.menu-items a

は相対がこのキーワードは、すべての要素をレイアウトにpasudoクラスの後に使用して変換し、トランジションCSSの助けを借りて、一番下の行を追加したいです要素が配置されていないかのようにしてから、レイアウトを変更せずに要素の位置を調整します（したがって、要素の間隔はになります）。は配置されていませんでした）。 table- -group、table-row、table-column、table-cell、table-caption 要素のposition：relativeの効果は未定義です。

その後、top: 100%;

ライブデモに.header-menu li > a::afterでtop: 50%;を変更

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

私は1つのポイントは、HTML内のすべてのものは、第1の相対位置または依存されている、あなたの答えを形成し得ますあなたの構造上 –

NO！親の相対位置は、子要素を絶対的にその内部に配置するコントロールを提供します。デフォルト値はposition：staticです。 –

CSSの擬似クラスを使用してアンカーに一番下の行を追加

答えて

関連する問題