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