将CSS应用于WordPress菜单项中的最后一个字符

Question

我想将一些CSS应用于WordPress网站上当前查看的菜单项。我可以将CSS应用于整个项目，但想要将某些内容应用于特定的最后一个字符。

有没有人有关于如何去做这件事的任何想法？

谢谢。

Answer 1

这是没有跨浏览器的解决方案来实现它使用纯CSS。

您可以使用PHP或JavaScript来获取最后一个字符和样式，或者您可以将最后一个字符包装到另一个元素中，如<span>，并使用css作为其通常的样式。

---

编辑：这里是JavaScript的方法：

<p class="test">This is a test</p> 

var targets = document.getElementsByClassName('test'); 
for(i=0; i<targets.length; i++) { 
    var html = targets[i].innerHTML; 
    targets[i].innerHTML = html.substr(0, html.length-1) 
     + "<span class='lastChar'>" 
     + targets[i].innerHTML.substr(-1) 
     + "</span>"; 
} 

Fiddle Demo

Answer 2

正如费利克斯说，不存在跨浏览器解决方案采用纯CSS来实现它。我会推荐编写简单的js代码来分割菜单项并添加span类和最后一个字母。

$('document').ready(function() { 
    var item = $('.current-menu-item').children().html(); 
    $('.current-menu-item').children().html(item.substr(0, item.length - 1) + '<span class="last">' + item.substr(-1) + '</span>'); 
});