Question

我有以下由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中的某些内容？

Answer 1

您可以通过将其设置为“”来删除内容，如下所示：

Route::resource('/','PostsController');

这将从您的菜单中删除“>”图标。

Answer 2

出于我不了解的原因，:before不起作用，但:after起作用。这是有道理的，因为指示器显示在图标之后。

.v-menubar > .v-menubar-menuitem-menulevel0 .v-menubar-menuitem-caption:after {
    content: "";
}

通过使用更多CSS设置样式或删除使用CSS添加的元素

2 个答案: