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 テクニックを使用する方法はありますか?

Answer 1

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: "»";
}

http://jsfiddle.net/thirtydot/vQyZc/5/