RiPro-V2美化之菜单角标添加 WordPress教程

如上图所示效果

下面开始教程：

首先在 后台，主题设置，顶部设置，自定义CSS处添加以下代码

/* 分类角标 */
.afoxin {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to top, #b4b1ef, #e21fc7 7.56%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}

.afonew {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to top, #f308a0 0%, #fb0655 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}
/* 分类角标 */

然后在需要添加角标的那个菜单名称后面写上以下代码

<span class="afonew">HOT</span>

注意：有两个样式和值就是class=里面的afonew也可以换成afoxin后面>hot<是自定义显示的文字。