时间戳

首页 > 解决方案 > 我在菜单项的伪元素中使用 unicode，是否可以仅从第一个菜单项中删除它？

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

问题描述

我在菜单中使用 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;}

标签： csswordpressmenuicons

解决方案

是的，可以通过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>

试试这个

推荐阅读