秋硕学习笔记 美化 WordPress导航菜单添加提示文字

WordPress导航菜单添加提示文字

后台,外观,菜单,找到你想设置个性特效的那个项目,CSS类填入“new”,保存菜单。 如果找不到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”,对应“热”。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若本站内容侵犯了原著者的合法权益,请联系我们进行处理。本文地址:https://wparticle.cn/1270.html

作者: wordus

记录生活感悟,分享网络资源,交流学习体会,感受美好人生。秋硕学习笔记,记录分享学习、生活、工作、旅游、健身、爱好的个人博客。
返回顶部