如何在图标固定于::before时，用::after伪元素实现段落顶部标题样式？

调整后的SCSS实现 #

p.note {
  display: flex;
  flex-wrap: wrap;
  /* 统一控制纵向元素间距，替代零散的边距设置 */
  gap: 0.75rem 0;
  /* 保留原有定位上下文，兼容后续细节调整 */
  position: relative;

  &::before {
    /* 保留伪元素位置存放Icomoon图标，不修改图标content配置 */
    order: 1;
    margin-left: auto;
    align-self: flex-start;
  }

  &[title]::after {
    content: attr(title);
    /* 调整到内容流最前端作为顶部标题 */
    order: -1;
    /* 占满整行实现块级标题效果，自动触发换行 */
    flex-basis: 100%;
    /* 基础标题样式，与正文自然区分 */
    font-weight: 600;
    /* 微调间距，匹配视觉上的标题与正文距离 */
    margin-bottom: -0.25rem;
  }
}

/* 原有icon类配置完全保留，不做任何修改 */
.icon::before {
  content: "@";
}

实现逻辑说明 #

• 所有元素均处于正常文档流内，不存在绝对定位导致的边距难以控制、图标与标题重叠的问题，间距可通过gap和少量margin自由调整
• 图标始终保留在::before伪元素中，未修改Icomoon图标的content配置，完全符合图标相关约束
• 没有改动Kramdown生成的HTML结构，Markdown源码的书写规则与原有逻辑完全一致，未增加冗余标记或额外HTML包裹层
• 未引入任何JavaScript逻辑，全部通过原生CSS实现效果
• 未设置title属性时，::after伪元素不会被生成，弹性布局仅保留正文和图标两个元素，图标自动靠右顶部对齐，正文自然流式排列，无布局异常

内容的提问来源于stack exchange，提问作者nonsensation