user3502952 user3502952 - 3 years ago 63
CSS Question

Small border under li / navigation element

This is what I am trying to achieve but it cannot figure it out:

enter image description here



ul {
list-style-type: none;
}
li {
height: 50px;
width: 180px;
line-height: 50px;
background: #ddd;
display: inline-block;
text-align: center;
}
li:hover {
box-shadow: 0 5px 0 0 gold;
}

<ul>
<li>Hello</li>
<li>World</li>
</ul>





I am just trying to get it like the pic above.

Answer Source

You can use pseudo elements

ul {
  list-style-type: none;
}
li {
  height: 50px;
  width: 180px;
  line-height: 50px;
  background: #ddd;
  display: inline-block;
  text-align: center;
  position:relative;
}
li:hover:after {
    content: '';
    border-bottom: 5px solid gold;
    width: 50px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 25px); /* This will make border center aligned */
}
<ul>
  <li>Hello</li>
  <li>World</li>
</ul>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download