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

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;
    }