Html li/导航元素下的小边框

这就是我试图实现的目标，但它无法理解：

ul{
列表样式类型：无；
}
李{
高度：50px；
宽度：180px；
线高：50px；
背景：ddd；
显示：内联块；
文本对齐：居中；
}
李：悬停{
盒影：0.5px 0.0黄金；
}

你好
世界

像这样更改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{
列表样式类型：无；
}
李{
高度：50px；
宽度：180px；
线高：50px；
背景：ddd；
显示：内联块；
文本对齐：居中；
职位：相对
}
李：悬停：之后{
内容：“；
位置：绝对位置；
盒影：0.5px 0.0黄金；
宽度：30px；
左：50%；
底部：0px；
高度：10px；
左边距：-15px；
}

你好
世界

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

CSS

ulli{位置：相对；}

ul li:hover：：在{content:”；位置：绝对；高度：1px；宽度：25px；背景色：金色；底部：0；左侧：50%；变换：TranslateX（-50%）；}

我会对那条小行使用after元素

ul{
列表样式类型：无；
}
李{
显示：内联块；
填充：0.75em 1.5em；/*我会使用填充，而不是固定的宽度和高度*/
文本转换：大写；/*使文本大写*/
位置：相对位置；
}
李：悬停{
颜色：绿色；/*将此颜色更改为绿色*/
}
李：悬停：之后{
内容：''；
显示：块；
位置：绝对；/*将其放置在底部*/
底部：0；
左：35%；/*左和右确定行的长度，您想要的越长，这些值应该越接近0*/
右：35%；
高度：2倍；
背景：绿色；/*与字体颜色匹配*/
}

你好
世界

您可以使用

伪元素

ul{
列表样式类型：无；
}
李{
高度：50px；
宽度：180px；
线高：50px；
背景：ddd；
显示：内联块；
文本对齐：居中；
位置：相对位置；
}
李：悬停：之后{
内容：''；
边框底部：5px纯金；
宽度：50px；
位置：绝对位置；
底部：0；
左：计算（50%-25px）；/*这将使边框中心对齐*/
}

你好
世界

可能重复感谢你的回答皮特：）谢谢你的回答阿披舍克我已将你的答案标记为：）很乐意帮助：）嘿，拉尔基，谢谢你的帮助：）