CSS :: before :: after pseudo-element della classe non funzionante

Question

Sto tentando di aggiungere uno pseudo-elemento ::before e ::after a un'intestazione di menu. Gli pseudo-elementi funzionano bene per un collegamento regolare al di fuori del menu. Tuttavia, quando sto cercando di applicarli a una voce di menu, la proprietà background è impostata, ma le proprietà ::before e non lo sono.

Ecco il CSS:

#cssmenu { 
    background-color: #FFFFCC; 
    clear: both; 
    display: inline; 
    float: left; 
    list-style: none; 
    overflow: hidden; 
    text-align: center; 
    text-transform: uppercase; 
    width: 100%; 
} 
#cssmenu li { 
    display: inline-block; 
} 
#cssmenu li a { 
    display: inline-block; 
} 
#cssmenu li ul { 
    /*margin-top: 0px; submenu location relative to bottom of parent */ 
    display: none; 
} 
#cssmenu li:hover ul { 
    display: block; 
    position: absolute; 
} 
#cssmenu li ul li a { 
    width: 200px; 
} 
#cssmenu li:hover > a { 
    /* shadow around parent when hover */ 
    box-shadow: 5px 5px 25px #000; 
    -moz-box-shadow: 5px 5px 25px #000; 
    -webkit-box-shadow: 5px 5px 25px #000; 
} 
#cssmenu li a { 
    color: #000; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 0 12px; 
    line-height: 24px; 
} 
#cssmenu li a:hover { 
    background-color: #99CC99; 
    /*padding: 12px; link background when hover over link */ 
} 
#cssmenu li ul { 
    background: rgba(255,255,255,0.9); child menu background w/ transparency 
    padding: 10px 5px; 

    box-shadow: 5px 5px 25px #BBB; 
    -moz-box-shadow: 5px 5px 25px #BBB; 
    -webkit-box-shadow: 5px 5px 25px #BBB; 

    border-radius: 0px 15px 15px 15px; 
    -moz-border-radius: 0px 15px 15px 15px; 
    -webkit-border-radius: 0px 5px 5px 5px; 
} 
/* display sub-menu as list */ 
#cssmenu li ul li { 
    display: block; 
    text-align: left; 
} 
#cssmenu li ul li a, #nav li ul li a:hover { 
    background: transparent; 
    color: #000; 
    width: 180px; 
    font-size: 0.95em; 
    font-weight: normal; 
    padding: 6px; 
} 
#cssmenu li ul li a:hover { 
    /*text-decoration: underline;*/ 
    box-shadow: none; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
} 
.menuheader { 
    /* allow for the pseudo-elements which do not have layout due to absolute positioning */ 
    margin: 12px 15px; 
    border: 0; 
    background: url("../../../images/buttonslice24.png") 24px 0 repeat-x ; 
} 
.menuheader::before, 
.menuheader::after { 
    content: ' '; 
    position: absolute; 
    top: 0; 
    width: 12px; 
    height: 24px; 
} 
.menuheader::before { 
    left: -12px; 
    background: url("../../../images/buttonleft24.png") 0 0; 
    no-repeat; 
} 
.menuheader::after { 
    right: -12px; 
    background: url("../../../images/buttonright24.png") 100% 0; 
    no-repeat; 
} 

ed il relativo codice HTML:

<div id="cssmenu"> 
    <ul> 
    <li><a class="menuheader" href="../../../contact-us.aspx">Contact</a></li> 
    <li><a class="menuheader" href="../../../">Home</a></li> 
    <li><a class="menuheader">Store</a> 
     <ul> 
     <li><a href="../../../shipping-policy.aspx">Shipping &amp; Return Policy</a></li> 
     </ul> 
    </li> 
    <li><a class="menuheader" href="../../../account.aspx">Account</a></li> 
    <li><a class="menuheader" href="../../../cart.aspx">View Cart</a></li> 
    </ul> 
</div> 

JSFiddle

Ho anche cercato di fare riferimento gli elementi di classe menuheader da #cssmenu ul li a invece, e che funziona davvero (sorta di). Invece delle immagini ::before e ::after visualizzate accanto alla voce di menu stessa, vengono visualizzate accanto al primo elemento nel menu a discesa.

Ho letto altre domande su qui per quanto riguarda gli pseudo-elementi, così come http://www.w3schools.com/css/css_pseudo_elements.asp e, per quanto posso dire, il ::before e ::after dovrebbe essere in grado di essere applicato ad un elemento <a>. Questo potrebbe essere un problema semplice, ma non vedo il problema qui.

Answer 1

Se si posizionano gli elementi pseudo in modo assoluto, è necessario fornire ai propri genitori un valore position uguale a quello degli elementi non pseudo.

Basta aggiungere:

.menuheader { 
    position : relative; 
} 

Ecco una versione aggiornata del vostro JSFiddle (gli unici cambiamenti sono l'aggiunta di codice di cui sopra e rendendo lo sfondo degli elementi pseudo un colore solido per la dimostrazione): http://jsfiddle.net/99Aq8/1/