CSS :: trước :: sau phần tử giả của lớp không hoạt động

Question

Tôi đang cố thêm một phần tử giả ::before và ::after vào tiêu đề trình đơn. Các phần tử giả hoạt động tốt cho một liên kết thông thường bên ngoài trình đơn. Tuy nhiên, khi tôi cố gắng áp dụng chúng vào một mục trình đơn, thuộc tính background được đặt, nhưng các thuộc tính ::before và ::after thì không.

Đây là CSS liên quan:

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

Và HTML liên quan:

<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

Tôi cũng đã cố gắng để tham khảo các mặt hàng lớp menuheader bởi #cssmenu ul li a thay vào đó, và rằng thực sự hoạt động (loại). Thay vì các hình ảnh ::before và ::after hiển thị bên cạnh mục menu, chúng hiển thị bên cạnh mục đầu tiên trong trình đơn thả xuống.

Tôi đã đọc câu hỏi khác trên đây liên quan đến các yếu tố giả, cũng như http://www.w3schools.com/css/css_pseudo_elements.asp và như xa như tôi có thể nói, các ::before và ::after sẽ có thể được áp dụng cho một yếu tố <a>. Đây có thể là một số vấn đề đơn giản, nhưng tôi chỉ không thấy vấn đề ở đây.

Answer 1

Nếu bạn định vị trí hoàn toàn các phần tử giả, bạn cần cung cấp cho giá trị position của cha mẹ, giống như với các phần tử không giả.

Chỉ cần thêm:

.menuheader { 
    position : relative; 
} 

Dưới đây là một phiên bản cập nhật của JSFiddle của bạn (những thay đổi chỉ được thêm đoạn code trên và làm cho nền của các yếu tố giả một màu cho cuộc biểu tình): http://jsfiddle.net/99Aq8/1/