css - 插入嵌套元素

Question

有没有办法使用 CSS 将一个元素的内容与另一个元素包裹起来？

我正在寻找类似于 :before 的机制但是它将采用这个 HTML

<div class="wrap-content">
    content
</div>

然后把它变成这样:

<div class="wrap-content">
    <p class="wrapper">
        content
    </p>
</div>

---

为什么我需要这个:我有 div与 float: right但内容应该左对齐。我可以通过插入 <p style="text-align:left"></p> 来实现这一点围绕内容。

然而，我正在为浏览器呈现框架编写 markdown 内容，其中我有一个用于插入外部 div 的简短语法。 , 添加 p手动意味着大量的复制和粘贴(和困惑)。如果有不同的(更聪明的)方法来做到这一点，我当然也会很高兴。

Answer 1

我认为仅使用 css 是不可能的，您可能需要一些 javascript。

否则，如果您能够更新外部 div，则可以使用 :before 并向外部 div 添加属性以将其值用作 :before 的内容，如下所示:

<div class="wrap-content" data-content="content"></div>

CSS:

.wrap-content:before{
  content: attr(data-content);
  display: block;
  text-align: left;
}