Html 我有一个带有伪：after元素的div，在它后面创建了一个圆。我怎样才能在圆圈内添加其他内容？

我使用：after伪类在div后面出现了一个CSS圆圈。我需要在圆圈内插入一个箭头。我的问题是把任何东西放在圆圈里。既然我已经使用了：after来创建圆，那么我如何在其中添加其他内容呢

我需要的圆圈是纯CSS，但箭头可以是一个图像

这是我的密码：

今天给我们打电话！
1 (800) 555-5555
#老茧电话{
颜色：白色；
背景：黑色；
填充：25px 0px；
文本对齐：居中；
}
.电话号码{
垫底：10px；
}
#callus电话：之后{
背景：红色；
边界半径：50px；
内容：“；
显示：块；
高度：50px；
保证金：自动；
宽度：50px；
}

您可以仅使用带有字体的CSS获得相同的结果。它不使用：在你提到它之后，但是再一次，它是纯CSS，如果你不想包括字体很棒的库，你可以研究他们的CSS，看看他们是如何做到的，然后用：after实现你自己的图标

在我的示例中，我添加了一系列定位和字体大小，以尽我所能将箭头居中，但如果您愿意，可以忽略这一点

我希望这是有帮助的

#callus手机{
颜色：白色；
背景：黑色；
填充：25px 0px；
文本对齐：居中；
}
.电话号码{
垫底：10px；
}
F.圆{
颜色：红色；
}
.fa插入符号右键{
颜色：白色；
左：2px！重要；
顶部：-2px！重要；
位置：相对位置；
字体大小：40px！重要；
}
.fa堆栈{
字体大小：30px；
}

今天给我们打电话！
1 (800) 555-5555

您可以在

内容中使用Unicode字符
\25B6


#callus手机{
颜色：白色；
背景：黑色；
填充：25px 0px；
文本对齐：居中；
}
.电话号码{
垫底：10px；
}
#callus电话：之后{
背景：红色；
边界半径：50px；
内容：“\25B6”；
显示：块；
线高：50px；
高度：50px；
保证金：自动；
宽度：50px；
字号：22px
}

今天给我们打电话！
1 (800) 555-5555
您可以使用
：：before
作为带有
位置：absolute
的箭头，您可以使用
#callus phone:before
并为其提供
背景图像。
<div id="callus-phone">
    <div class="tagline">Call us today!</div>
    <div class="phone-number">1 (800) 555-5555</div>
</div>

#callus-phone {
    color: white;
    background: black;
    padding: 25px 0px;
    text-align: center;
}

.phone-number {
    padding-bottom: 10px;
}

#callus-phone:after {
  background: red;
  border-radius: 50px;
  content: "";
  display: block;
  height: 50px;
  margin: auto;
  width: 50px;
}