css hover给当前元素或其他元素添加伪元素

逸尘️

于 2019-10-10 11:36:22 发布

阅读量3.5k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/haoaiqian/article/details/102477923

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. 作用于本身伪元素

a:hover::after {
      content: "";
      position: absolute;
      left: 16px;
      top: 24px;
      bottom: 0;
      right: auto;
      height: 2px;
      width: 30px;
      background-color: #ffffff;
    }

2. 作用于紧邻着的兄弟元素（一个）

a:hover + a::after {
      content: "";
      position: absolute;
      left: 16px;
      top: 24px;
      bottom: 0;
      right: auto;
      height: 2px;
      width: 30px;
      background-color: #ffffff;
    }

3. 作用于元素本身之后的所有元素

a:hover ~ a::after {
      content: "";
      position: absolute;
      left: 16px;
      top: 24px;
      bottom: 0;
      right: auto;
      height: 2px;
      width: 30px;
      background-color: #ffffff;
    }

4. 作用于元素本身的子代元素

a:hover > a::after {
      content: "";
      position: absolute;
      left: 16px;
      top: 24px;
      bottom: 0;
      right: auto;
      height: 2px;
      width: 30px;
      background-color: #ffffff;
    }