a：悬停：div内部出现在div的右侧而不是文本的结尾

Question

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

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