在里面显示<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。

我构建了一个codepen here来显示问题。有人能指出我的解决方案吗？非常感谢！

Answer 1

您的<div>从font-size继承了0 .hi-icon。删除它，它显示在圆圈下方。

Answer 2

首先：你不能通过：before和：after pseudoclasses添加html。

第二：两者：before和：after在引用元素的外部之后添加内容，而不是内部。因此，即使您可以使用：在html插入之前/之后，您仍以<div><a ...>Product</a></div>结束，而不是<a ...><div>Product</div></a>。

如果您真的需要使用a自动换行div的内容，只需使用jQuery：

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