如何将伪元素设置为段落的标题？答案

【问题标题】：How can I style a pseudo-element as the title of a paragraph?如何将伪元素设置为段落的标题？
【发布时间】：2021-03-22 08:06:07
【问题描述】：

我们正在使用 Markdown (Kramdown) 来生成静态网站。对于信息框，我们可以对段落进行注解，得到如下结果：

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

这是转换后的 HTML：

<p class="note icon-check" title="This is a title">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>

样式是（SCSS）：

p.note {
  &::before {
    float: right;
  }

  position: relative;

  &[title]::after {
    content: attr(title);
    position: relative;
    top: 0;
    left: 0;
  }
}

.icon::before {
  content: "@";
}

由于我们使用的是Icomoon图标字体，其中content设置在:before中，标题必须在:after中。

我们不会更改图标字体，所以图标必须留在:before
markdown 中没有额外的分散注意力的标记，因此没有 HTML 包装器
没有Javascript

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

Here is a JSFiddle

现在，如何设置一个带有:after 作为标题在顶部 的框，这在没有设置标题时也很好看？

main {
  width: 50%;
  display: block;
  place-items: center;
  margin: auto;
}

p.note {
  border: 3px solid red;
  border-radius: 3px;
  padding: 1em;
  position: relative;
}

p.note::before {
  margin: auto 0 0.5em 0.5em;
  float: right;
}

p.note[title]::after {
  content: attr(title);
  position: relative;
  font-weight: bold;
  top: 0;
  left: 1em;
}

.icon::before {
  font-size: 2em;
  content: "@";
}

<html>

<body>
  <main>

    <p class="note icon" title="This is a title">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
    </p>

  </main>
</body>

</html>

它的样子：它应该是什么样子：

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
试试 grid jsfiddle.net/jrLua3xf 来玩 grid :)
@G-Cyrillus 但 @ 没有更多的浮动行为 ;) .. 浮动部分使它有点挑战
@TemaniAfif 让它跨越 2 行 jsfiddle.net/hcb7agow/2 ... 或不;)
是的，它确实（也可以弯曲）每段文本都被包装到一个虚拟标签中，然后设置在一个单元格中或被浏览器视为单个 flex 子项；）

标签： html css css-position pseudo-element

【解决方案1】：

由于grid 没有足够的帮助，让我们及时回到display :table 和display:table-caption 添加另一个答案，看看这是否也适合你；）

* {
  box-sizing: border-box;
}

main {
  width: 50%;
  min-width:450px;
  display: block;
  place-items: center;
  margin: auto;
}

p.note {
  font-size:clamp(12px, 4vw, 30px);
  border: 3px solid red;
  border-radius: 3px;
  padding: 1em;
  display: table;
  padding-top: 1.5em;
}
p.note::before {
  margin: auto 0 0.5em 0.5em;
  float: right;
  font-weight:bold;
  color:tomato;
}
p.note[title]::after {
  content: attr(title);
  font-weight: bold;
  display: table-caption;
  margin-bottom: -1.6em;
  text-align: center;
  padding-right: 3em;
}

.icon::before {
  font-size: 2em;
  content: "@";
  line-height: 0.25;
}

<main>
 
 <p class="note icon" title="This is a title">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
 </p>
 
</main>

【讨论】：

【解决方案2】：

一个使用 shape-outside 的疯狂想法。诀窍是对应用浮动的标题使用 before 和 after 用于具有 position:absolute 的图标，然后 shape-outside 将创建一个特定的形状，以模拟图标周围的浮动行为。

main {
  width: 50%;
  display: block;
  margin: auto;
  text-align:justify;
}

p.note {
  border: 3px solid red;
  border-radius: 3px;
  padding: 1em;
  position: relative;
}

p.note::after {
  margin: auto 0 0.5em 0.5em;
  position:absolute;
  top: 1em;
  right: 0.5em;
}


p.note[title]::before {
  content: attr(title);
  display:block;
  height:3.5em;
  float:right;
  width:100%;
  text-align:center;
  font-weight: bold;
  shape-outside:polygon(0 0,100% 0,100% 100%,calc(100% - 3em) 100%,calc(100% - 3em) calc(100% - 2em),0 calc(100% - 2em));
  /* To illustrate the shape */
  background:
    linear-gradient(rgba(255,255,0,0.3) 0 0) top/100% calc(100% - 2em) no-repeat,
    linear-gradient(rgba(255,255,0,0.3) 0 0) bottom right/3em 3em no-repeat;
  border:1px solid rgba(0,0,0,0.2);
   /**/
}

.icon::after {
  font-size: 2em;
  content: "@";
}

.icon:not([title])::after {
  display:none;
}

.icon:not([title])::before {
  font-size: 2em;
  content: "@";
  margin: auto 0 0.5em 0.5em;
  float:right;
}

<main>

  <p class="note icon" title="This is a title">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
  </p>

</main>

<main>

  <p class="note icon" >
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
  </p>

</main>

或者像下面这样的基本想法：

main {
  width: 50%;
  display: block;
  margin: auto;
  text-align:justify;
}

p.note {
  border: 3px solid red;
  border-radius: 3px;
  padding: 1em;
  position: relative;
}

p.note::before {
  margin: auto 0 0.5em 0.5em;
  float: right;
}

p.note[title]::after {
  content: attr(title);
  position: absolute;
  font-weight: bold;
  top: 0.5em;
  left: 0;
  right:2em;
  text-align:center;
}
p.note[title] {
  padding-top:2em;
}

.icon::before {
  font-size: 2em;
  content: "@";
}

<main>

  <p class="note icon" title="This is a title">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
  </p>

</main>

<main>

  <p class="note icon" >
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quidem non placeat quibusdam velit, dicta adipisci saepe magnam fuga debitis qui, minima, eius error laboriosam distinctio eos natus et!
  </p>

</main>

【讨论】：

感谢您的回答 :-) 但是 ::before 已经被 iconfont 使用了，所以我不能这样使用它，并且每次更新时都更改字体或更改它的 CSS 我试图避免。唯一的“免费”伪元素是::after。另外我刚刚检查过，不支持多个嵌套的伪元素（如::before::before）。
As we are using Icomoon icon fonts, where the content is set in :before, the title must be in :after.，但你的想法真的很酷 =)) 赞！
@nonsensation 添加了另一个想法 ;)