CSS :: before :: after pseudoelement klasy nie działa

Question

Próbuję dodać pseudoelementu ::before i ::after do nagłówka menu. Pseudoelementy działają dobrze dla zwykłego łącza poza menu. Jednak gdy próbuję zastosować je do elementu menu, ustawiona jest właściwość background, ale właściwości inie są ustawione.

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

a odpowiednim 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

Próbowałem również odwołać się do przedmiotów klasy menuheader przez #cssmenu ul li a zamiast, i że faktycznie działa (rodzaj). Zamiast obrazów znajdujących się obok samego elementu menu zamiast ikon z menu rozwijanego są wyświetlane obok pierwszego elementu z menu rozwijanego.

Czytałem inne pytania na tutaj dotyczące pseudo-elementów, jak również http://www.w3schools.com/css/css_pseudo_elements.asp io ile mogę powiedzieć, ::before i ::after powinny móc być stosowane do elementu <a>. Może to być prosty problem, ale nie widzę tu problemu.

Answer 1

Jeśli zamierzasz całkowicie ustawić pseudo elementy, musisz podać ich rodzicowi wartość position, tak samo jak w przypadku elementów innych niż pseudo.

Wystarczy dodać:

.menuheader { 
    position : relative; 
} 

Oto zaktualizowaną wersję swojej JSFiddle (jedyne zmiany dodajesz powyższy kod i uczynienie tle elementów pseudo umaszczenie do demonstracji): http://jsfiddle.net/99Aq8/1/