title: CSS ::before ::after pseudo-element of class not working
body: <p>I am trying to add a <code>::before</code> and <code>::after</code> pseudo-element to a menu heading.  The pseudo-elements work fine for a regular link outside of the menu.  However, when I am trying to apply them to a menu item, the <code>background</code> property is set, but the <code>::before</code> and <code>::after</code> properties are not.</p>
  
  <p>Here is the relevant CSS:</p>
  
  <pre><code>#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 &gt; 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;
  }
  </code></pre>
  
  <p>And the relevant HTML:</p>
  
  <pre><code>&lt;div id="cssmenu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a class="menuheader" href="../../../contact-us.aspx"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="menuheader" href="../../../"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="menuheader"&gt;Store&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="../../../shipping-policy.aspx"&gt;Shipping &amp;amp; Return Policy&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a class="menuheader" href="../../../account.aspx"&gt;Account&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="menuheader" href="../../../cart.aspx"&gt;View Cart&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Asustaba/99Aq8/">JSFiddle</a></p>
  
  <p>I have also tried to reference the <code>menuheader</code> class items by <code>#cssmenu ul li a</code> instead, and that actually works (sort of).  Instead of the <code>::before</code> and <code>::after</code> images showing next to the menu item itself, they show next to the first item in the drop-down menu.</p>
  
  <p>I have read other questions on here regarding pseudo-elements, as well as <a href="http://www.w3schools.com/css/css_pseudo_elements.asp">http://www.w3schools.com/css/css_pseudo_elements.asp</a> and as far as I can tell, the <code>::before</code> and <code>::after</code> should be able to be applied to an <code>&lt;a&gt;</code> element.  This may be some simple issue, but I am just not seeing the issue here.</p>