如何用HTML/CSS实现导航栏样式：圆形图标与文字变色

第一步：调整HTML结构 #

给需要单独样式的元素加上类名，方便精准控制：

<div class="body-bottom">
    <div class="filter-menu">
           <ul>
               <li class="latest-item"><a href="" class="latest-link">Latest</a></li>
               <li><a href="">Popular</a></li>
               <li>|</li>
               <li><a href="" class="premium-link">Premium</a></li>
               <li><a href="" class="free-link">Free</a></li>
           </ul>
     </div>
</div>

第二步：编写CSS实现需求 #

.body-bottom>.filter-menu>ul li {
    display: inline-block; /* 改成inline-block，承载相对定位 */
    position: relative; /* 为右上角图标提供定位参考 */
}

.body-bottom>.filter-menu>ul li a {
    padding: 15px;
    text-decoration: none;
    color: #222429;
}

/* 给Latest添加右上角圆形图标 */
.latest-item::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: #ff4d4f; /* 可替换为设计图对应颜色 */
    border-radius: 50%;
}

/* 设置Premium文字颜色 */
.premium-link {
    color: #fa8c16; /* 可替换为设计图对应颜色 */
}

/* 设置Free文字颜色 */
.free-link {
    color: #52c41a; /* 可替换为设计图对应颜色 */
}

关键说明 #

• 把li的display从inline改成inline-block，是因为inline元素无法承载相对定位，会导致图标定位失效。
• 用伪元素::after实现圆形图标，无需额外HTML标签，通过绝对定位贴合文字右上角，调整top和right可微调位置。
• 给Premium和Free的a标签单独加类名，比用nth-child更稳定，后续结构调整也不会影响样式。

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