Html 元素中的文本来自哪里？

我在网上乱搞一些按钮，碰到一个按钮，悬停在上面时会显示一个箭头

我正在浏览这个元素的css和html，但看不到它们在任何地方显示的箭头

按钮是一个

a

标签，内部有一个跨距，如下所示：

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

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

我制作了一个JSFIDLE来展示：

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

#makeGroupButton span:after 
{
  content: '';  
  position: absolute;
  top: 0;
  right: -14px;
  opacity: 0;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  background: rgba(0, 0, 0, 0);
  border: 3px solid #FFF;
  border-top: none;
  border-right: none;
  transition: opacity 0.5s, top 0.5s, right 0.5s;
}

#makeGroupButton:hover span, #makeGroupButton:active span 
{
  padding-right: 30px;
}

#makeGroupButton:hover span:after, #makeGroupButton:active span:after 
{
  transition: opacity 0.5s, top 0.5s, right 0.5s;
  opacity: 1;
  border-color: white;
  right: 0;
  top: 50%;
}

---

这个CSS真是太神奇了

使用

：在
之后和
：在
之前

这样，您还可以显示
背景图像：url（路径/到/图像）
，您还可以设置位置等使用
#makeGroupButton span:after
和添加
右侧：-14px默认情况下，
将其悬停时，则：
right:0
并且您可以在
#makeGroupButton span:after
中使用
:after
css查看

我已经在css中做了一些更改，以在悬停时显示箭头


#makeGroupButton
{
字母间距：2px；
文本对齐：居中；
颜色：白色；
字体大小：24px；
字体系列：无衬线；
字体大小：300；
位置：绝对位置；
宽度：220px；
背景：绿色；
溢出：隐藏；
过渡：均为0.5s；
显示：表格；
}
#makeGroupButton:悬停，#makeGroupButton:活动
{
文字装饰：无；
背景图像：线性梯度（至底部，#3cb0fd，#3498db）；
}
#makeGroupButton跨度
{
显示：内联块；
位置：相对位置；
右边填充：0；
过渡：右移0.5s；
显示：表格单元格；
垂直对齐：中间对齐；
边际上限：0；
页边距底部：0；
填充顶部：0；
填充底部：0；
}
#makeGroupButton范围：之后
{
内容：''；
位置：绝对位置；
顶部：17px；
右图：-14px；
不透明度：0；
宽度：10px；
高度：10px；
利润上限：-10px；
背景：rgba（0,0,0,0）；
边框：3px实心#FFF；
边界顶部：无；
边界权：无；
过渡：不透明度0.5s，顶部0.5s，右侧0.5s；
变换：旋转（-135度）；
}
#makeGroupButton:悬停范围，#makeGroupButton:活动范围
{
右侧填充：30px；
}
#makeGroupButton:悬停范围：之后，#makeGroupButton:活动范围：之后
{
过渡：不透明度0.5s，顶部0.5s，右侧0.5s；
不透明度：1；
边框颜色：白色；
右：10px；
}
要删除箭头，请选中此类
#makeGroupButton:悬停span:after，#makeGroupButton:活动span:after
并删除
css
中的
不透明度
或
右侧：0
，同时删除此类css
#makeGroupButton:悬停span，#makeGroupButton:active span
@MarksCode这是否回答了您的问题，还是您仍在搜索正确答案？此外，在chrome浏览器中，您可以调试并标记所有元素的
悬停
，然后还可以找到
：在
之后和
：在
之前的元素
#makeGroupButton:hover:before {
  content: 'before';
  display: inline-block;
}

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