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

this question has answer here:

• how write :hover condition a:before , a:after? 6 answers

before starting preview code want bit closer environment i'm in.. i'm trying generate menu different tab-sections "start, groups, help, etc.". let's select centered tab-button, groups.. looks while hovered:

as i'm entering 1 of pseudo-elements, i'm using build 45deg sides, hover style parent div switches off. pseudos still visible:

note: i'm not able manipulate html markup. way can achieve changes site editing css.. let's have @ 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 on to...

---

my question

am able select pseudo-elements state :hover or there other usable way achieve clean transition, while moving through items? far tried select .nav-item::after:hover, .nav-item::before:hover, .nav-item:hover::after:hover , .nav-item:hover::before:hover ...

nothing worked, i'm unable force pseudo-elements while they're hovered..

---

thanks in advance...

---

edit - solution

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

thank @merijn van wouden ;)

only put hover on .nav-item, not on pseudo elements hover on .nav-item controls whether or not pseudo elements shown.

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

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

also notice how made 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; }