在元素中显示<div>：

Question

使用:before将图标字体添加到css3悬停状态的div中。我希望在<a>标记中包含一个div，以便两者都可以作为链接：

<a href="#set-4" class="column product hi-icon product-icon"><div>Product</div></a>

css：

.product-icon:before {
    content: "\e601";
    margin-top: "-4px";
}

但是，我不知道如何让标题div显示。

我已经构建了一个代码在这里来显示问题。有人能帮我找到解决办法吗？非常感谢！

Answer 1

您的<div>正在从.hi-icon继承font-size of 0。去掉它，它就会显示在圆圈下面。

Answer 2

首先:您不能通过:First和：html伪类添加。

第二:两者都是：“前”和“后”将其内容添加到引用元素之外，而不是内部。因此，即使您可能使用: use /:after进行html插入，您仍然使用了<div><a ...>Product</a></div>，而不是<a ...><div>Product</div></a>。

如果您真的需要用div自动包装div的内容，只需使用jQuery：

$('.product-icon').each(function() {
    $(this).html('<div>' + $(this).html() + '</div>');
});