CSS :: before :: çalışmayan sınıf öğesinin çalışmasından sonra

Question

Bir menü yönüne ::before ve ::after sözde öğeyi eklemeye çalışıyorum. Sözde öğeler, menü dışında düzenli bir bağlantı için iyi çalışıyor. Ancak, bunları bir menü öğesine uygulamak istediğimde, background özelliği ayarlanır, ancak ::before ve ::after özellikleri değildir.

#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; 
} 

Ve alakalı HTML: Burada

ilgili CSS

<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

Ben de onun yerine #cssmenu ul li a tarafından menuheader sınıf öğeleri başvurmak için çalıştık ve bu Aslında çalışır (çeşit). Menü öğesinin yanında gösterilen ::before ve ::after görüntüleri yerine, açılır menüdeki ilk öğenin yanında görünürler.

Burada ilişkin sözde elemanlar yanı sıra http://www.w3schools.com/css/css_pseudo_elements.asp diğer sorular okudum ve bildiğim kadarıyla söyleyebilirim, ::before ve ::after bir <a> elemana uygulanacak gerekir. Bu basit bir sorun olabilir, ancak sorunu burada görmüyorum.

Answer 1

Sözde öğeleri kesinlikle konumlandıracaksanız, ebeveynlere, sözde olmayan öğelerle aynı position değerini vermeniz gerekir.

Hemen ekleyin: http://jsfiddle.net/99Aq8/1/