多次渲染<a> tag when pseudo ::before is applied

Question

I have the following structure of html structure:

<div>
    <ul>
        <li>
            <a href="http://facebook.com/" target="_blank"/>
        </li>
    </ul>
</div>

Also i have css file:

a[href*='facebook.com/']:before {
    content: "\ea90";
}

The problem is that i find duplications of a tag in generated DOM stucture, and these elements are also shown on page. What did i miss?

Rendered html:

<div>
    <ul>
        <li>
            <a href="http://facebook.com/" target="_blank"></a>
        </li>
        <a href="http://facebook.com/" target="_blank"></a>
    </ul>
</div>

Answer 1

您必须关闭锚标记。您可能希望将代码更改为如下所示：

<div>
    <ul>
        <li>
            <a href="http://facebook.com/" target="_blank"/>example text</a>
        </li>
    </ul>
</div>

如果您在我写“示例文本”的地方填写任何内容，它将为该列表项添加标签。希望这会有所帮助！