WordPress菜单NEW徽章右侧间隙过大，如何用CSS缩小？

我在WordPress的菜单项上添加了一个NEW标识，使用的代码如下：

<span class='new-badge-1'>NEW</span>

我的CSS代码为：

.new-badge-1 {
    position: relative;
    background: #c32545;
    color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    top: -20px;
    padding: 3px 3px;
    font-size: 10px;
    font-weight: bolder;
    letter-spacing: 2px;
    text-transform: uppercase;
    left: -11px;
}  

.new-badge-1:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #c32545;
    border-bottom: 0;
    border-left: 0;
    margin-left: -10px;
    margin-bottom: -9px;
}

这段代码运行正常，但页面显示时，NEW标识与下一个菜单项之间存在明显的右侧间隙，请问如何缩小该间隙？

解决方法 #

1. 改用绝对定位脱离文档流

当前.new-badge-1使用relative定位时，仍会占据原有文档空间，导致后续菜单项被挤开。改成absolute定位后，标识不再占用正常布局空间，可直接消除间隙：

.new-badge-1 {
    /* 替换原有position: relative */
    position: absolute;
    /* 保留其他原有属性，根据实际布局调整定位值，示例： */
    top: 5px;
    left: calc(100% - 25px);
}

注意：需要给菜单项的父容器（如<li>标签）添加position: relative，让绝对定位的标识以父菜单项为基准定位。

2. 压缩标识自身占用空间

如果不想修改定位方式，可通过以下方式缩小标识宽度：

• 减小或移除letter-spacing: 2px，比如改为letter-spacing: 0
• 缩小内边距，将padding: 3px 3px调整为padding: 2px 2px
• 添加white-space: nowrap避免标识换行，同时设置max-width限制宽度

3. 调整菜单项默认间距

若间隙源于菜单项本身的默认边距过大，可给菜单项（如<li>）设置更小的右侧边距：

/* 假设菜单项选择器为.nav-menu li */
.nav-menu li {
    margin-right: 10px; /* 按需调整数值 */
}

内容的提问来源于stack exchange，提问作者Ian