Question

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

与this question不同，{{3}}仅讨论添加<等符号。我试图添加的内容如下：

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

有没有办法做到这一点？

Answer 1

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

它也应该是不必要的 - 在您生成的伪元素中粘贴您的背景图像/图标字体/。

Answer 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应该可以帮助您

在CSS Content属性中添加HTML标记

2 个答案: