在 CSS Content 属性中添加 HTML 标签

Posted 2023-03-05

【中文标题】在 CSS Content 属性中添加 HTML 标签

【英文标题】：Add HTML tag inside CSS Content property

【发布时间】：2014-04-26 00:44:13

【问题描述】：

我正在寻找一种在:after 和:before 中为CSS 内容属性添加html 标记的方法。

与 this question 不同，后者仅讨论添加 < 等符号。我要添加的内容类似于：

.breadcrumbs li a:before 
    content: '<i class="icon"></i>';

有没有办法做到这一点？

【问题讨论】：

一个没有内容的斜体元素和一类图标？糟糕。

为什么不在<a>标签内添加图标？

【参考方案1】：

这是不可能的。您不能从 CSS 生成标记。

这也应该是不必要的 - 将您的背景图像/图标字体/您已经生成的伪元素中的任何内容。

【讨论】：

我可以使用 javascript (/jQuery) 进行成像的唯一方法。纯 CSS，不可能！

@MuhammadReda — 使用您已经为 i 元素使用的代码。

【参考方案2】：

这可能就是你想要的，

要将图像放在面包屑 li 链接的左侧：

.breadcrumbs li a::before 
    content: "";
    display: block;
    background: url('/img/breadcrumb-icon.png') no-repeat;
    width: 20px;
    height: 20px;
    float: left; /*icon on the left*/
    margin: 0 6px 0 0; /*margin on the right so there is a gap between your icon and link*/

如果你想要它在另一边尝试float:right;margin: 0 0 0 6px; 或使用::after 应该让你部分的方式