插入嵌套元素

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;
}