Css 如何将边框顶部移动到页面的最顶部？

我想在导航栏上做一个悬停效果，我想在你们的光标所在的li上面画一条线

我给了li一个

border top

属性，但我需要该行位于页面的最顶部，而不是直接位于li的顶部

#李斯特：悬停{
边框顶部：3倍实心；
颜色：#5CABD1；
}

我已经知道问题出在border top的房产上，但我不知道其他人如何在我的li上面画一条线。这是我的导航栏和当前边框顶部效果的照片

---

问题似乎在于您将悬停行为指定给列表项，而不是链接本身。如果容器链接一直延伸到顶行，它应该重叠并正确显示。

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<style>
 ul {
  list-style-type: none;
  margin-top: 60px;
  padding: 0;
  overflow: hidden;
 }

 li {
  float: left;
 }

 li a {
 display: block;
 padding: 8px;
 background-color: #dddddd;
 text-decoration:none
}
li a:hover:before{
  content:'';
  position:absolute;
  top:10px;
  border-top:2px solid red;
  width:40px;
  height:1px;
}
</style>






保险商实验室{
列表样式类型：无；
边缘顶部：60像素；
填充：0；
溢出：隐藏；
}
李{
浮动：左；
}
李阿{
显示：块；
填充：8px；
背景色：#dddddd；
文本装饰：无
}
李娜：悬停：在之前{
内容：''；
位置：绝对位置；
顶部：10px；
边框顶部：2件纯红；
宽度：40px；
高度：1px；
}

您可以使用伪元素来完成这项工作。下面是一个在hover上工作的演示