html - 防止 ::after 选择器成为链接的一部分？

Question

谷歌自己愚蠢，似乎仍然找不到任何关于它的信息。以下问题：

向链接添加 ::after 选择器会将其添加为链接的一部分。有没有办法使 ::after 选择器不会扩展链接（仅限文本，不可点击）？看例子，有没有办法，“»”不会是链接的一部分？

例子：

a::after {
  content: " »";
}

<a href="#">Test</a>

标签： htmlcss

Answer 1

使其宽度为0并添加pointer-events: none;

a::after {
  content: " »";
  display:inline-block;
  margin-left:8px;
  width:0;    
  pointer-events: none;
}

a {
  font-size:35px;
  margin-right:20px; /* to avoid overflow issue and cover the area of the pseudo element */
}

<a href="#">Test</a> some text after