html - li/navigation 元素下的小边框

Question

这就是我想要实现的，但它无法弄清楚:

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>

我只是想像上面的图片那样得到它。

Answer 1

我会为那条小线使用一个 after 元素

ul {
  list-style-type: none;
}

li {
  display: inline-block;
  padding: 0.75em 1.5em;             /* I would use padding instead of fixed width and height */
  text-transform: uppercase;    /* make text uppercase */
  position: relative;
}

li:hover {
  color: green;      /* change this to your green color */
}

li:hover:after {
  content:''; 
  display:block; 
  position:absolute;  /* position this at the bottom */
  bottom:0;
  left:35%;            /* left and right determine length of line, the longer you want it, the closer to 0 these values should be */
  right:35%;
  height:2px;
  background:green;    /* match the font color */
}

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