如何在CSS中的悬停链接上创建下划线效果

Question

The styling I look into achieving can be shown in this screenshot: .

Please tell how to create the effect that i pointed out using CSS.

Answer 1

By using :hover and setting a border-bottom . Something like this

 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 2

  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> 

Answer 3

a{
   text-decoration:none;
}

a:hover {
   text-decoration:underline;
}

This should work for links, however the effect in the picture seems to be made with the link's container border:

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

This should work ^^