WordPress导航菜单添加个性文字特效

今天又去扒别人站的特效了，Wordpress Justnews官方群有人发了个好看的导航特效（suanding.com），就是几个导航菜单后面添加“热”、“新”、“预”等自己自定义的文字特效，看起来挺美观。顺手就扒了特效，分享出来大家一起用。特效使用很简单，用的是class的after，添加了一些css，再搭配Wordpress的菜单设置CSS类，就可以完美的达到每个单独菜单或者叫文章分类显示独特的样式了。

下面正式开始教程：

后台，外观，菜单，找到你想设置个性特效的那个项目，CSS类填入“new”，保存菜单

注：如果找不到CSS类，可以在菜单设置右上角找到显示选项，显示下CSS类！

主题设置，自定义CSS选项，插入如下代码：

.menu-item.hot:after {
    background-color: red;
    color: rgb(255, 255, 255);
    content: "热";
    font-size: 10px;
    line-height: 1;
    position: absolute;
    right: -1px;
    top: 12px;
    border-radius: 3px;
    padding: 1px 3px;
}
.menu-item.new:after {
    background-color: orange;
    color: rgb(255, 255, 255);
    content: "新";
    font-size: 10px;
    line-height: 1;
    position: absolute;
    right: -1px;
    top: 12px;
    border-radius: 3px;
    padding: 1px 3px;
}

上面的“new”，对应“新”；上面代码中的“hot”，对应“热”。其他自定义字符，照猫画虎吧，就那么简单。

实际的显示效果如下图所示，首页及论坛交流后面的文字就是本文所添加的特效！

如果你的后台菜单那里找不到CSS类，可以点击菜单设置页面右上角的显示选项，显示下CSS类！