html - 在链接上使用 :before 和 :after 而不使内容成为链接的一部分

Question

如果我有以下

HTML：

<p>
    <a href="#">Home</a>
    <a href="#">Section</a>
    <a href="#">Subsection</a>
</p>

CSS：

a:before {
    content: "/";
    padding-right: 4px;
}
a:first-child:before {
    content: "»";
}

内容分隔符显示为链接的一部分。

它看起来像什么

有什么方法可以让内容不成为链接的一部分并且仍然使用这种 css 技术？

score 3 · Accepted Answer

我建议将您的 HTML 更改为：

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Section</a></li>
    <li><a href="#">Subsection</a></li>
</ul>

然后你可以使用li:before：

li {
    list-style: none;
    display: inline;
}
li:before {
    content: "/";
    padding-right: 4px;
}
li:first-child:before {
    content: "»";
}

score 2 · Accepted Answer

您可以通过对 html 代码进行一些更改来做到这一点，如下所示：

<p>
<span><a href="#">Home</a></span>
<span> <a href="#">Section</a></span>
<span><a href="#">Subsection</a></span>
</p>

和这样的CSS：

span:before {
    content: "/";
    padding-right: 4px;
}
span:first-child:before {
    content: "»";
}

2 回答 2