伪元素

最新推荐文章于 2024-08-12 12:31:02 发布

Esabelle

最新推荐文章于 2024-08-12 12:31:02 发布

阅读量221

点赞数

分类专栏： CSS中级

本文链接：https://blog.csdn.net/weixin_41824127/article/details/80826307

版权

CSS中级专栏收录该内容

8 篇文章 0 订阅

订阅专栏

动态导航效果

伪元素还能这么用？

与hover配合使用

<!-- 与hover配合使用 -->                                                                                              edit on codepen
<div>
  <ul>
    <li class="nav-item">tina</li>
    <li class="nav-item">esabelle</li>
    <li class="nav-item">mike</li>
    <li class="nav-item">eloise</li>
  </ul>
</div>edit on codepen
<div>
  <ul>
    <li class="nav-item">tina</li>
    <li class="nav-item">esabelle</li>
    <li class="nav-item">mike</li>
    <li class="nav-item">eloise</li>
  </ul>
</div>

.nav-item{
  list-style-type: none;
  position: relative;
}
.nav-item:before,.nav-item:after{
  position: absolute;
}
.nav-item:hover:before{
  content: "\5B";
  left: -10px;
}
.nav-item:hover:after{
  content: "\5D";
  left: 4%;
}