html - a:hover:after div 的内部出现在 div 的右侧而不是 a 的文本结尾

Question

我无法让 a:hover:after 出现在标签文本之后。内容出现在末尾<div>。有没有办法让它出现在文本之后<a>？我不希望之后的内容在悬停时推送其他元素。

<div>
  <a href="#">test</a>
</div>

a:hover:after{
  display: inline-block;
  content: ">>";
  position: absolute;
  right: 0;
  top: 0;
}

这是 jsFiddle jsFiddle

Answer 1

取出right:0似乎做你想做的事

http://jsfiddle.net/a6AA9/

你是这个意思吗？

上面的margin-left提示也很好

Answer 2

消除

  position: absolute;
  right: 0;
  top: 0;

保持刚刚

a:hover:after{
    display: inline-block;
    content: ">>";
}

演示：http: //jsfiddle.net/AGDbH/381/

Answer 3

您可以删除绝对位置并放置一个小边距。

content: ">>";
display: inline-block;
margin-left: 5px;