li /导航元素下的小边框

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

我会在后面使用一个小元素

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>

Answer 2

您可以使用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>

Answer 3

更改Css赞

li {
  height: 50px;
  width: 180px;
  line-height: 50px;
  background: #ddd;
  display: inline-block;
  text-align: center;
  position:relative; /*add This Property*/
}

li:hover:after {
content:"";
position:absolute;
  box-shadow: 0 5px 0 0 gold;
  width:30px;
  left:50%;
  bottom:0px;
  height:10px;
  margin-left:-15px;
}

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:"";
position:absolute;
  box-shadow: 0 5px 0 0 gold;
  width:30px;
  left:50%;
  bottom:0px;
  height:10px;
  margin-left:-15px;
}

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

Answer 4

你可以像这样添加一个pseude元素：

CSS
ul li{position:relative;}
ul li:hover::after{content:"";position:absolute;height:1px;width:25px;background-color:gold;bottom:0;left:50%;transform:TranslateX(-50%);}