我在菜单项的伪元素中使用 unicode，是否可以仅从第一个菜单项中删除它？

Question

我将 unicode \25C6 用于菜单中的黑色实心菱形，作为标签之间的分隔符。我在 Stack Overflow 上找到的每个线程都使用了 before 伪元素。我在这里搜索了大约一个小时，但我想要做的事情可能没有用正确的措辞搜索。

我只使用来自 Wordpress 的开箱即用的 21-12 主题和子主题。我确实发现了其他一些关于删除特定菜单项图标的类似问题，但我还没有找到适合我的问题。如果有人认为 ::after 更好用，我只想删除或“显示：none”第一个图标或最后一个图标。

我已尝试将其添加到 .nav-menu li 中，但这使其可点击并且可能存在问题。我希望我已将链接正确添加到该站点，如果没有，请道歉。

这是网站http://vangurubros.com/

这是我试图让 unicode 工作的原因

.main-navigation ul.nav-menu ::before {
content: "\25C6";
list-style: none;
font-size: 1.15em;
color: #cc8040;
margin: 0 20px 0 0px; 
}

.nav-menu li ::before {display: none;}

Answer 1

是的，可以通过 css 实现。

使用:not(:first-child) 伪元素/类（随便）

ul.nav-menu li:not(:first-child)::before {
    content: "\25C6";
    list-style: none;
    font-size: 1.15em;
    color: #cc8040;
    margin: 0 20px 0 0px;
}
ul li{display:inline-block;}

<ul id="menu-amenu" class="nav-menu"><li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-24 current_page_item menu-item-58"><a href="http://vangurubros.com/">Home</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://vangurubros.com/media/">Media</a></li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://vangurubros.com/news/">News</a></li>
<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://vangurubros.com/contact/">Contact</a></li>
</ul>

试试这个

Answer 2

你需要添加这样的代码：

.main-navigation ul.nav-menu li::before {
       content: "\25C6";
       list-style: none;
       font-size: 1.15em;
       color: #cc8040;
       margin: 0 20px 0 0px; 
    }
    .main-navigation ul.nav-menu li:first-child::before {
      display: none;
    }