li / 导航元素下的小边框答案

【问题标题】：Small border under li / navigation elementli / 导航元素下的小边框
【发布时间】：2017-05-24 12:54:34
【问题描述】：

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

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>

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

【问题讨论】：

Border length smaller than div width?的可能重复

标签： html css

【解决方案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>

【讨论】：

感谢皮特的回答 :)

【解决方案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>

【讨论】：

感谢 Abhishek 的回答，我已将您的回答标记为 :)
乐于助人:)

【解决方案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>

【讨论】：

嘿 Lalji，谢谢你的帮助 :)

【解决方案4】：

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

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%);}

【讨论】：