Html 如何设置伪元素作为段落标题的样式？

我们正在使用Markdown（Kramdown）生成一个静态网站。对于信息框，我们可以注释段落并获得以下结果：

{:.note .icon-check title="This is a title"}
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

这是转换后的HTML：

洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。

样式为（SCSS）：

p.note{
&：：之前{
浮动：对；
}
位置：相对位置；
&[标题]：：之后{
内容：attr（title）；
位置：相对位置；
排名：0；
左：0；
}
}
.图标：：之前{
内容：“@”；
}

由于我们使用的是Icomoon图标字体，其中

内容设置在
：before
中，标题必须在
：before
中


我们不会更改图标内容，因此图标必须保持在
：before
标记中没有额外的分散注意力的标记，因此没有HTML包装
没有Javascript

可以设置标题的绝对位置，但这对于段落文本本身来说太窄，因为无法设置边距


现在，如何设计一个带有
：after
作为顶部标题的框，在没有设置标题的情况下也很好看



main{
宽度：50%；
显示：块；
放置项目：中心；
保证金：自动；
}
p、 注{
边框：3倍纯红；
边界半径：3px；
填充：1em；
位置：相对位置；
}
p、 注：之前{
保证金：自动0.5em 0.5em；
浮动：对；
}
p、 注[标题]：：之后{
内容：attr（title）；
位置：相对位置；
字体大小：粗体；
排名：0；
左：1米；
}
.图标：：之前{
字号：2em；
内容：“@”；
}


洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。这句话的意思是：“我不知道该怎么说，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是错误的，我的意见是，我的意见是正确的。”！

一个使用外部形状的疯狂想法。诀窍是在标题中使用before，在标题中应用float，在图标具有
position:absolute
时使用after，然后外部的形状将创建一个特定的形状，以模拟图标周围的浮动行为


main{
宽度：50%；
显示：块；
保证金：自动；
文本对齐：对齐；
}
p、 注{
边框：3倍纯红；
边界半径：3px；
填充：1em；
位置：相对位置；
}
p、 注：之后{
保证金：自动0.5em 0.5em；
位置：绝对位置；
顶部：1米；
右：0.5em；
}
p、 注[标题]：：之前{
内容：attr（title）；
显示：块；
高度：3.5公分；
浮动：对；
宽度：100%；
文本对齐：居中；
字体大小：粗体；
外部形状：多边形（0 0100%0100%100%，钙（100%-3em）100%，钙（100%-3em）钙（100%-2em），0钙（100%-2em））；
/*说明形状*/
背景：
线性梯度（rgba（255255,0,0.3）0 0）顶部/100%钙（100%-2米）无重复，
线性梯度（rgba（255255,0,0.3）0 0）右下/3em 3em无重复；
边框：1px实心rgba（0,0,0,0.2）；
/**/
}
.图标：：之后{
字号：2em；
内容：“@”；
}
.图标：非（[标题]：：之后{
显示：无；
}
.icon:not（[title]）：：之前{
字号：2em；
内容：“@”；
保证金：自动0.5em 0.5em；
浮动：对；
}


洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。这句话的意思是：“我不知道该怎么说，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是错误的，我的意见是，我的意见是正确的。”！


洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。这句话的意思是：“我不知道该怎么说，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是错误的，我的意见是，我的意见是正确的。”！

既然没有足够的帮助，让我们用
显示：表格
和
显示：表格标题
返回时间，添加另一个答案，看看这是否也适用于您；）


*{
框大小：边框框；
}
主要{
宽度：50%；
最小宽度：450px；
显示：块；
放置项目：中心；
保证金：自动；
}
p、 注{
字体大小：夹钳（12px，4vw，30px）；
边框：3倍纯红；
边界半径：3px；
填充：1em；
显示：表格；
垫面：1.5em；
}
p、 注：之前{
保证金：自动0.5em 0.5em；
浮动：对；
字体大小：粗体；
颜色：番茄；
}
p、 注[标题]：：之后{
内容：attr（title）；
字体大小：粗体；
显示：表格标题；
边缘底部：-1.6em；
文本对齐：居中；
右侧填充：3em；
}
.图标：：之前{
字号：2em；
内容：“@”；
线高：0.25；
}


洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。这句话的意思是：“我不知道该怎么说，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是，我的意见是错误的，我的意见是，我的意见是正确的。”！

寻求代码帮助的问题必须包含在问题中重现所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请参阅。尝试grid以获得grid的乐趣：）@G-Cyrillus，但不再为@；）提供浮动行为。。浮动部分使它有点challenging@TemaniAfif让它跨越两行。。。或者不是；）是的，它会（也是flex）将每段文本包装成一个虚拟标记，然后在单元格中设置，或者浏览器将其视为单个flex子项；）感谢您的回答：-）但是，
：：之前，icont已经使用了
，因此我不能以这种方式使用它，每次更新它时，我都试图避免更改字体或更改CSS。唯一的“空闲”伪元素是
：：after
。另外，我刚刚检查过，不支持多个嵌套的伪元素（如
：：before:：before
）。
因为我们使用的是Icomoon图标字体，其中内容设置为：before，标题必须为