CSSのホバリングリンクの下線効果を作成するには

Question

私が達成しようとしているスタイリングはこのスクリーンショットに表示されます：。

CSSを使用して私が指摘した効果を作成する方法を教えてください。

Answer 1

a{ 
    text-decoration:none; 
} 

a:hover { 
    text-decoration:underline; 
} 

これはリンクのために働く必要があり、しかし、写真の効果は、リンクのコンテナの境界線で作られているように見える：

div.yourcontainer:hover{ 
    border-bottom:2px solid red; 
} 

これは:hoverを使用して設定することで^^

Answer 2

を動作するはずですa border-bottom。このような何か

ul{ 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
ul li{ 
 
    float: left; 
 
    margin: 0 5px; 
 
} 
 
ul li a{ 
 
    text-decoration:none; 
 
    color: black; 
 
} 
 
ul li:hover{ 
 
    border-bottom: 2px solid red; 
 
}

<ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">About</a></li> 
 
    <li><a href="">Contact</a></li> 
 
</ul>

Answer 3

a { 
 
     display: inline-block; 
 
     position: relative; 
 
     text-decoration: none; 
 
     text-align: center; 
 
    } 
 

 
    a:hover:before { 
 
     content: ''; 
 
     width: 100%; 
 
     height: 100%; 
 
     position: absolute; 
 
     left: 0; 
 
     bottom: 0; 
 
     box-shadow: inset 0 -10px 0 #11c0e5; 
 
    } 
 

 
    a span { 
 
     display: block; 
 
     width: 100px; 
 
     height: 40px; 
 
     background-color: red; 
 
     padding-top: 20px; 
 
    }

<a href="#"> 
 
    <span>link texts</span> 
 
    </a>