CODEWITHSUNDEEP
cssmenuvaadin
Adder
Adder

Reputation: 5878

Style or Remove an element that has been added using CSS by using more CSS

I have the following HTML and CSS, which is generated by Vaadin framework:

<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;
}

The :before adds an Indicator which I want to remove or hide.

It seems impossible for me to select just the element in :before so I can keep the Menu text but remove the indicator.

How can I modify or remove something in a :before using CSS?

Upvotes: 0

Views: 66

Answers (2)

Adder
Adder

Reputation: 5878

For reasons I don't understand, :before doesn't work, but :after does. It makes sense since the indicator is displayed after the icon.

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

Upvotes: 0

cloned
cloned

Reputation: 6742

you can remove the content by setting it to "", like so: 

.v-menubar > .v-menubar-menuitem:before {
   content: "";
}

this will remove the ">" Icon from your menu.

Upvotes: 2

Related Questions