如何用CSS为当前页面导航栏下方添加蓝色圆点

要实现这个效果，核心是给当前页面的导航元素标记专属类，再通过CSS伪元素生成蓝色圆点，具体步骤如下：

1. 修改HTML结构 #

给当前页面对应的导航项添加active类，用来区分当前页和其他页的导航状态：

<Nav>
<m1 class="active">首頁</m1><br><m2>Top</m2>
</Nav>

（注：如果当前页是Top，就给<m2>添加class="active"）

2. 添加CSS样式实现圆点 #

在现有CSS基础上，补充针对active类的伪元素样式，生成下方的蓝色圆点：

#Nav{
    text-align:center;
    line-height:1;
}

m1{
    font-size:14px;
    letter-spacing:6px;
    font-weight:lighter;
    /* 给导航项设置相对定位，让伪元素基于它定位 */
    position: relative;
}

m2{
    font-size:8px;
    letter-spacing:2px;
    -webkit-transform:scale(0.67);
    display:inline-block;
    font-weight:lighter;
    /* 同样给m2设置相对定位 */
    position: relative;
}

/* 当前页导航项的圆点样式 */
m1.active::after, m2.active::after {
    content: '';
    /* 生成圆形 */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #007bff; /* 蓝色，可按需调整色值 */
    /* 定位到导航项下方居中位置 */
    position: absolute;
    bottom: -8px; /* 调整圆点与文字的间距 */
    left: 50%;
    transform: translateX(-50%);
}

样式说明 #

• position: relative：给导航元素设置相对定位，确保伪元素的绝对定位是基于导航元素本身。
• ::after伪元素：通过空内容生成块级元素，设置宽高、圆角变成圆形，再用绝对定位固定到文字下方居中处。
• 色值#007bff是标准蓝色，你可以根据网站风格替换成其他蓝色调。

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