<a> 应用伪 ：：before 时的多个渲染标记

Question

我有以下html结构的结构：

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

此外，我有css文件：

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

问题是，我在生成的DOM结构中发现了a标记的重复，这些元素也显示在页面上。我错过了什么？

渲染的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>

如果你在我写"示例文本"的地方填写任何内容，它会为该列表项贴上标签。希望这能有所帮助！