title: Highlighting list entries with :before pseudo element (z-index issue)
body: <p>I have a list of items (generated by JSTree). I 'd like to highlight the whole line of an item through the :before pseudo element which already worked for me in a different HTML structure. Now, with the generated one something is messed up with the z-indexes. The z-index for the items with the :before class is -1 at the moment. If i change it to 1 it will appear in front of all the links but it should be the background. No matter what value i choose, i can't get the highlighting appear in front of the background but behind the links.</p>
  
  <p>Here is a part of the html code:</p>
  
  <pre><code>&lt;div id="jlayout_west_center" class="center" style="width: 300px; height: 897px; left: 0px; top: 0px; position: absolute;"&gt;
      &lt;div id="jlayout_west_center_content" class="jlayout-panelContent jstree jstree-0 jstree-custom jstree-focused" style="width: 100%; height: 100%;"&gt;
          &lt;ul class="jstree-no-dots jstree-no-icons"&gt;
              &lt;li class="jstree-last jstree-open"&gt;&lt;ins class="jstree-icon jstree-ocl"&gt;&amp;nbsp;&lt;/ins&gt;&lt;a href="javascript:void(0);"&gt;&lt;ins class="jstree-icon jstree-themeicon"&gt;&amp;nbsp;&lt;/ins&gt;Root&lt;/a&gt;
  
                  &lt;ul style=""&gt;
                      &lt;li class="jstree-open"&gt;&lt;ins class="jstree-icon jstree-ocl"&gt;&amp;nbsp;&lt;/ins&gt;&lt;a href="javascript:void(0);" class=""&gt;&lt;ins class="jstree-icon jstree-themeicon"&gt;&amp;nbsp;&lt;/ins&gt;Category1&lt;/a&gt;
  
                          &lt;ul style=""&gt;
                              &lt;li class="jstree-leaf"&gt;&lt;ins class="jstree-icon jstree-ocl"&gt;&amp;nbsp;&lt;/ins&gt;&lt;a href="javascript:void(0);"&gt;&lt;ins class="jstree-icon jstree-themeicon"&gt;&amp;nbsp;&lt;/ins&gt;Item 1&lt;/a&gt;
  
                              &lt;/li&gt;
                              [...]
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li class="jstree-last jstree-closed"&gt;&lt;ins class="jstree-icon jstree-ocl"&gt;&amp;nbsp;&lt;/ins&gt;&lt;a href="javascript:void(0);" class=""&gt;&lt;ins class="jstree-icon jstree-themeicon"&gt;&amp;nbsp;&lt;/ins&gt;Category 2&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is how the css is made up:</p>
  
  <pre><code> /*
   * jsTree default theme 1.0
   * Supported features: dots/no-dots, icons/no-icons, focused, loading
   * Supported plugins: ui (hovered, clicked), checkbox, contextmenu, search
   */
   .jstree-custom {
      background: #383838;
  }
  .jstree-custom a {
      color: #c3c3c3;
      font-size: 14px;
      line-height: 30px;
      height: 30px;
  }
  .jstree-custom a.jstree-hovered {
      color: #ffffff;
      background: transparent;
      border-color: transparent;
  }
  .jstree-custom a.jstree-clicked {
      color: #ffffff;
      background: transparent;
      border-color: transparent;
  }
  .jstree-custom li:hover a.jstree-hovered:before {
      position:absolute;
      left: 0;
      content:"";
      width: 100%;
      height: 30px;
      background: #614832;
      z-index:-1;
  }
  .jstree-custom a.jstree-clicked:before {
      position:absolute;
      left: 0;
      content:"";
      width: 100%;
      height: 30px;
      background: #614832;
      z-index: -1;
  }
  .jstree-custom {
      padding-left: 20px;
      padding-top: 15px;
  }
  .jstree-custom ul:first-child {
      margin-top: 0px;
  }
  .jstree-custom li, .jstree-custom ins {
      /*background-image:url("../img/lib/jquery-plugins/jstree/d.png");*/
      background-repeat: no-repeat;
      background-color: transparent;
      font-size: 12px
  }
  .jstree-custom li {
      background-position:-90px 0;
      background-repeat:repeat-y;
  }
  .jstree-custom li.jstree-last {
      background:transparent;
  }
  .jstree-custom .jstree-ocl {
      width: 7px;
      height: 30px;
      margin-right: 13px;
  }
  .jstree-custom .jstree-open &gt; .jstree-ocl {
      background-image:url(../img/lib/jquery-plugins/jstree/tree_opened.gif);
  }
  .jstree-custom .jstree-closed &gt; .jstree-ocl {
      background-image:url(../img/lib/jquery-plugins/jstree/tree_closed.gif);
  }
  .jstree-custom .jstree-leaf &gt; .jstree-ocl {
      background-position:-36px 0;
  }
  .jstree-custom .jstree-loading &gt; .jstree-ocl {
      background:url("throbber.gif") center center no-repeat !important;
  }
  .jstree-custom .jstree-hovered {
      background:#e7f4f9;
      border:1px solid #d8f0fa;
      padding:0 2px 0 1px;
  }
  .jstree-custom .jstree-clicked {
      background:#beebff;
      border:1px solid #99defd;
      padding:0 2px 0 1px;
  }
  .jstree-custom a .jstree-themeicon {
      background-position:-56px -19px;
  }
  .jstree-custom .jstree-no-dots li, .jstree-custom .jstree-no-dots .jstree-leaf &gt; .jstree-ocl {
      background:transparent;
  }
  .jstree-custom .jstree-no-dots .jstree-open &gt; .jstree-ocl {
  }
  .jstree-custom .jstree-no-dots .jstree-closed &gt; .jstree-ocl {
  }
  .jstree-custom .jstree-no-icons a .jstree-themeicon {
      display:none;
  }
  .jstree-custom .jstree-search {
      font-style:italic;
      color:aqua;
  }
  .jstree-custom .jstree-no-checkboxes .jstree-checkbox {
      display:none !important;
  }
  .jstree-custom .jstree-check {
      display:none;
  }
  .jstree-custom .jstree-checkbox {
      background-position:-2px -19px;
  }
  .jstree-custom .jstree-checked {
      background-position:-38px -19px;
  }
  .jstree-custom .jstree-undetermined {
      background-position:-20px -19px;
  }
  .jstree-custom a:hover .jstree-checkbox {
      background-position:-2px -37px;
  }
  .jstree-custom a:hover .jstree-checked {
      background-position:-38px -37px;
  }
  .jstree-custom a:hover .jstree-undetermined {
      background-position:-20px -37px;
  }
  #jstree-dnd.jstree-custom ins {
      background:transparent;
  }
  #jstree-dnd.jstree-custom .jstree-ok {
      background:url("d.png") -2px -53px no-repeat;
  }
  #jstree-dnd.jstree-custom .jstree-er {
      background:url("d.png") -18px -53px no-repeat;
  }
  /*#jstree-marker.jstree-custom { background:url("d.png") -41px -57px no-repeat !important; text-indent:-100px; }*/
   .jstree-custom .jstree-locked a {
      color:silver;
      cursor:default;
  }
  .jstree .jstree-icon.jstree-themeicon {
      display: none;
  }
  </code></pre>
  
  <p>And a JSFiddle where all this is put together where the problem can reproduced:</p>
  
  <p><a href="http://jsfiddle.net/nt7eC/1/" rel="nofollow">http://jsfiddle.net/nt7eC/1/</a></p>
  
  <p>Please see <strong>Item 2</strong> it has the jstree-clicked class and is supposed to be shown with a highlighted background.</p>