[分享]css中怎么做收藏的导航条

在网页开发中，一个常见的问题就是如何实现导航条的收藏功能。下面我们来介绍如何使用CSS实现这个功能。首先，我们需要定义导航条的HTML结构，我们假设HTML代码已经写好，目前只需要使用CSS来实现收藏...

在网页开发中，一个常见的问题就是如何实现导航条的收藏功能。下面我们来介绍如何使用CSS实现这个功能。
首先，我们需要定义导航条的HTML结构，我们假设HTML代码已经写好，目前只需要使用CSS来实现收藏功能。
我们可以使用CSS中的:before伪元素来实现这个功能，代码如下所示：

.nav-item.favorite:before {
  content: "2605";
  color: #FFD700;
  font-size: 20px;
}

.nav-item:not(.favorite):before {
  content: "2606";
  color: #CCC;
  font-size: 20px;
}

.nav-item.favorite:hover:before,
.nav-item.favorite:focus:before {
  color: #F0AD4E;
} 

在这个CSS代码中，我们首先定义了一个.nav-item.favorite选择器，:before伪元素的content属性设置为一个实心星号，这个星号是HTML字符实体，可以使用Unicode编码表示。我们也可以使用其他字符或图片实现“收藏”的效果。
随后，我们又定义了一个.nav-item:not(.favorite)选择器，表示没有收藏的导航条项。这些项的:before伪元素的content属性设置为一个空心星号。
最后，我们还定义了一个.nav-item.favorite:hover:before和.nav-item.favorite:focus:before选择器，用于在收藏的导航条项上添加鼠标悬停和聚焦时的效果。这里的颜色设置仅供参考，你可以根据自己的需求来进行设置。
在HTML中，我们只需要像下面这样使用.nav-item.favorite和.nav-item两个类名即可：

<ul>
  <li class="nav-item favorite">收藏</li>
  <li class="nav-item">导航项1</li>
  <li class="nav-item">导航项2</li>
  <li class="nav-item">导航项3</li>
</ul> 

完成上述步骤后，我们的导航条就可以显示“已收藏”和“未收藏”的效果。通过这个简单的CSS技巧，我们可以方便地实现网页中的收藏功能。