如何用CSS和HTML将导航项hover下划线替换为单点？

HTML 结构 #

先搭建基础的导航栏结构：

<nav class="nav-menu">
  <a href="#" class="nav-item">Home</a>
  <a href="#" class="nav-item">Movies</a>
  <a href="#" class="nav-item">Music</a>
  <a href="#" class="nav-item">About</a>
</nav>

CSS 样式 #

通过CSS重置链接默认样式，并用伪元素实现悬停时的单点效果：

/* 重置导航链接默认样式 */
.nav-menu .nav-item {
  position: relative;
  text-decoration: none;
  color: #333; /* 可自定义文字颜色 */
  margin: 0 15px;
  padding-bottom: 5px; /* 给单点预留显示空间 */
}

/* 初始隐藏单点伪元素 */
.nav-menu .nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #333; /* 可自定义单点颜色 */
  opacity: 0;
  transition: opacity 0.2s ease; /* 添加入场过渡动画 */
}

/* 鼠标悬停时显示单点 */
.nav-menu .nav-item:hover::after {
  opacity: 1;
}

简单说明 #

• 给导航项设置position: relative，让伪元素可以基于它定位
• 用::after生成圆形单点，通过left:50%+transform: translateX(-50%)保证单点在文字下方居中
• 利用opacity控制单点的显示隐藏，配合过渡动画让效果更自然
• 可根据需求调整单点的大小、颜色，以及导航项的间距等参数

内容的提问来源于stack exchange，提问作者Frank McKale