css - 如何定位 html 元素内的文本？

Question

我有一个插件生成的以下案例，我无法重写，因为我需要修复它。它为网站生成面包屑，如下例所示:

<li><a>Parent</a></li>
<li><a>Subparent</a></li>
<li><a>Subsubparent</a></li>
<li>Current Site</li>

我已将链接设置为更易于点击

li {height: 40px;}
li a {padding: 5px; display: inline-block; height: 30px;}

现在当然最后一个元素没有得到相同的填充并且看起来有线。我无法包装像 span 这样的 html 元素在 php 中围绕它。

是否有一个 css 选择器可以在不影响元素本身的情况下选择元素内的文本？或者包装一个 html 元素，如 span在它周围，类似

li:last-child::before {content:"<span>"}

感谢每一个提示! If someone likes jsfiddle here is one to play with .

Answer 1

为什么不把填充和 anchor 一起添加到最后一个 li？

Updated JsFiddle

li a, li:last-child {padding: 10px; display: inline-block;}