应用伪 ::before 时多次渲染 <a> 标签答案

【问题标题】：Multiple rendering <a> tag when pseudo ::before is applied应用伪 ::before 时多次渲染 <a> 标签
【发布时间】：2018-12-31 00:45:56
【问题描述】：

我的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>

【问题讨论】：

我们不会这样写a标签...
你能发布你渲染的 DOM 结构是什么样子的吗？
锚需要一个结束标签才能正常工作：<a href="http://facebook.com/" target="_blank"></a>
@LGSon 非常感谢！它帮助了我！

标签： html css css-selectors pseudo-element

【解决方案1】：

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

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

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

【讨论】：