Css 如何使用：after pseudo将图标定位在h2标记之后，即使宽度为100%

我想知道是否有人知道我如何将三角形图标直接定位在我的

h2

标记文本之后，此时我使用：after并将其向右浮动，但因为

h2

是

display:block

此三角形位于右侧。因为我有一个边框底部，需要拉伸

100%

，所以我不能使用

display:inline block

来获得结果。不知道我是否可以实现这一点，而不必添加空跨度等

小提琴：

HTML:

---

如果您在生成的内容上使用

内联块

，它应该完全符合您的要求。请参见，CSS更改：

.definition-heading:after {
   display: inline-block; /* add this */
   /* float: right;
   top: 7px; remove these */
}

其中：

---

@CherryFlavourPez给出了最好的答案，我还建议您设计三角形图标的样式

垂直对齐：中间以便你的航向和三角形看起来很好

编辑

您也可以在不使用上述方法的情况下显示三角形图标，更简单的方法如下：

<h1>heading text here<span>►</span></h1>

此处的标题文本►

现在调整你的跨度。（三角形图标从角色地图复制）

.definition-heading:after {
   display: inline-block; /* add this */
   /* float: right;
   top: 7px; remove these */
}

<h1>heading text here<span>►</span></h1>