html - 元素中的文本来自哪里？

Question

我在网上弄乱了一些按钮，发现了一个悬停在上面时会显示箭头的按钮。

我正在查看此元素的 css 和 html，但看不到它们在任何地方显示的箭头。

按钮是一个a标签，里面有一个span，像这样:

 <a href="#" id="makeGroupButton">
    <span>Button</span>
 </a>

当用户将鼠标悬停在它上面时，一些文本会以某种方式附加到它上面，但我不知道这是怎么发生的。

我制作了一个 JsFiddle 来显示:http://jsfiddle.net/aoprjmxr/

css 超出了我的范围，谁能帮我看看这个箭头插入的位置？

Answer 1

使用 :after 和 :before http://jsfiddle.net/aoprjmxr/1/

#makeGroupButton:hover:before {
  content: 'before';
  display: inline-block;
}

#makeGroupButton:hover:after {
  content: 'after';
  display: inline-block;
}

像这样你也可以显示background-image: url(path/to/image)你也可以设置位置等等