Question

I’m trying to override a CSS class which is used to display an arrow. I want to make the arrow disappear. This class is found in the Liferay theme.

this CSS class:

.v-tabsheet-tabitem-selected:after {
    border: 10px solid;
    border-bottom-width: 0;
    border-color: #333 transparent transparent;
    bottom: -6px;
    content: '-';
    display: block;
    height: 0;
    left: 50%;
    margin-left: -10px;
    position: absolute;
    text-indent: -9999px;
    width: 0;
}

I did:

.v-tabsheet-tabitem-selected:after{
    content: none;    
}

It does not seem to work, is there any other way?

Answer 1

It looks like the arrow is being drawn with CSS borders, so try overriding it with this:

.v-tabsheet-tabitem-selected:after {border: none;}