我有以下由 Vaadin 框架生成的 HTML 和 CSS:
<div class="v-slot">
<div class="v-splitpanel-horizontal v-widget v-has-width" style="width: 100%;">
<div style="position: relative; width: 100%; height: 100%;">
<div class="v-splitpanel-first-container v-scrollable" style="height: 100%; width: 90px;">
<div tabindex="0" class="v-menubar v-widget v-has-width" style="width: 90px;">
<span class="v-menubar-menuitem v-menubar-menuitem-menulevel0 v-menubar-menuitem-selected" style="color: transparent;">
::before
<span class="v-menubar-submenu-indicator" style="color: yellow;">►</span>
<span class="v-menubar-menuitem-caption" style="color: red;">
<span class="v-icon Vaadin-Icons"></span></span>
</span>
</div>
</div>
</div>
</div>
.v-menubar > .v-menubar-menuitem:before {
content: ">";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
}
:before
添加了一个我想删除或隐藏的指示器。
我似乎不可能只选择 :before
中的元素,所以我可以保留菜单文本但删除指示器。
如何使用 CSS 修改或删除 :before
中的内容?
最佳答案
您可以通过将其设置为“”来删除内容,如下所示:
.v-menubar > .v-menubar-menuitem:before {
content: "";
}
这将从您的菜单中删除“>”图标。
关于css - 使用更多 CSS 样式化或删除已使用 CSS 添加的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52482136/