如何用CSS为导航栏添加顶部留白的角状悬停边框？

完全可以用CSS实现这个顶部带留白的角状边框效果，用伪元素就能搞定，不需要额外HTML标签。下面是完整的实现代码：

优化后的HTML（去掉字符分隔符，用CSS实现更灵活） #

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#blog">Blog</a>
  <a href="#others">My Others Services</a>
</nav>

核心CSS代码 #

/* 导航栏基础样式 */
nav {
  padding: 1rem;
  background-color: #f0f0f0;
}

/* 导航链接基础样式 */
nav a {
  position: relative;
  display: inline-block;
  padding: 0.6rem 1.2rem;
  margin: 0 0.6rem;
  text-decoration: none;
  color: #333;
}

/* 用伪元素实现链接间的分隔线，替代原有的|字符 */
nav a:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: -0.6rem;
  color: #999;
}

/* 悬停时的角状边框效果 */
nav a:hover::before,
nav a:hover::after {
  content: "";
  position: absolute;
  top: 0;
  border-top: 2px solid #2d3748; /* 边框颜色可自定义 */
  width: 22px; /* 边框长度可自定义 */
}

/* 左上角边框 */
nav a:hover::before {
  left: 0;
}

/* 右上角边框 */
nav a:hover::after {
  right: 0;
}

实现逻辑说明 #

• 给导航链接设置position: relative，作为伪元素的定位容器
• 利用::before和::after两个伪元素，分别定位在链接的左上角和右上角，只设置顶部边框和固定宽度，就形成了顶部中间留白的角状效果
• 链接间的分隔线也用伪元素实现，比原有的字符分隔更易调整样式

如果需要调整边框的颜色、长度，直接修改CSS里的border-top和width属性即可。

内容的提问来源于stack exchange，提问作者Sudo Sur