Pseudo-Element state - How to append a style to the state of after/before?

Question

Before starting to preview code I want to get you a bit closer to the environment I'm currently in.. I'm trying to generate a menu with different tab-sections like "start, groups, help, etc.". Let's select just the centered tab-button, Groups.. which looks like this while hovered:

As soon as I'm entering one of the pseudo-elements, that I'm using to build those 45deg sides, the hover style for the parent div switches off. But the pseudos are still visible:

Note: I'm not able to manipulate the html markup. The only way I can achieve changes to the site is editing the css.. Let's have a look at the code:

#header .nav-item {
    width: 33.33%;
}    

#header .nav-item:hover::before,
#header .nav-item:hover::after {
    display: inline-block;
    position: absolute;
    height: 50px;
    width: 50px;
}

#header .nav-item:hover::before {
    margin-left: -25px;
    background-image: -webkit-gradient(
        linear, right top, left bottom,
        color-stop(0.5, #111),
        color-stop(0.5, #fff));
    /* vendor specific gradients ... */
}

#header .nav-item:hover::after {
    margin-left: -25px;
    background-image: -webkit-gradient(
        linear, right top, left bottom,
        color-stop(0.5, #fff),
        color-stop(0.5, #111));
    /* vendor specific gradients ... */
}

Let's move over to...

My Question

Am I able to select the pseudo-elements state :hover or is there any other usable way to achieve a clean transition, while moving through the items? So far I tried to select .nav-item::after:hover, .nav-item::before:hover, .nav-item:hover::after:hover and .nav-item:hover::before:hover ...

Nothing worked, so I'm currently unable to force the pseudo-elements to do something while they're hovered..

Thanks in advance...

Edit - The solution

To force the pseudo elements not to stay visible while hovered, just put another element (e.g a, 'span', ...) above it using the z-index.

Thank you @Merijn van Wouden ;)

Hacktisch · Accepted Answer · 2015-09-21T13:07:05.830

Only put a hover on the .nav-item, not on the pseudo elements The hover on .nav-item also controls whether or not the pseudo elements are shown.

Look at: https://jsfiddle.net/xqe3vqmt/1/

EDIT: updated version: https://jsfiddle.net/xqe3vqmt/2/ (see comments below)

Also notice how I made the use of gradients unneccesary

HTML:

<div id="header"> 
    <a class="nav-item">START</a>
    <a class="nav-item">GRUPPEN</a>
    <a class="nav-item">HILFE</a>
</div>

CSS:

#header {
    margin-top:2em;
}
.nav-item {
    width: 120px;
    display:inline-block;
    position:relative;
    font-family:arial, helvetica;
    text-align:center;
    height:3em;
    line-height:3em;
    margin:0 1.5em;
    cursor:pointer;
}
.nav-item:before, .nav-item:after {
    content:"";
    width:0;
    height:0;
    border:1.5em solid transparent;
    position:absolute;
    top:0;
}
.nav-item:before {
    right:100%;
}
.nav-item:after {
    left:100%;
}
.nav-item:hover {
    background:black;
    color:white;
}
.nav-item:hover:before {
    border-right-color:black;
    border-top-color:black;
}
.nav-item:hover:after {
    border-left-color:black;
    border-bottom-color:black;
}

Alright, that's also a nice solution (+1), but if you take a closer look the `:hover` is triggered to early and the next element gets it without the cursor even in range.. — Jan Unld, Sep 21 '15 at 12:49
This way it works without the transparent boxes around pseudo elements: https://jsfiddle.net/xqe3vqmt/2/ it requires slight restructuring of the html (put spans inside the links) — Hacktisch, Sep 21 '15 at 13:06

Pseudo-Element state - How to append a style to the state of after/before?

My Question

Edit - The solution

1 Answers1