title: Use pseudo-element :before in UL to create a vertical line
body: <p>I'm creating a vertical menu that can have submenus. For these, I'm trying to add a vertical line with the use of CSS pseudo-element <code>::before</code> and <code>border</code>.</p>
  
  <p>The issue that I'm facing is that CSS is being applied to the entire menu instead of the specific submenu. </p>
  
  <p>I think the issue lies with the use of <code>position: absolute;</code>, but without it, the border is never displayed. </p>
  
  <p>Below is the code and you can check the issue in this <strong><a href="http://jsfiddle.net/milz/r8kvqnLy/" rel="nofollow">JsFiddle</a></strong>.</p>
  
  <pre><code>&lt;ul id="test-ul"&gt;
      &lt;li&gt;&lt;a&gt;one&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a&gt;two&lt;/a&gt;
          &lt;ul class="submenu"&gt;
              &lt;li&gt;&lt;a&gt;sub one&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;sub two&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;sub three&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a&gt;three&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;four&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;five&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;style&gt;
      /* reset defaults */
      ul { list-style: none; }
  
      /* apply style to menu */
      #test-ul {
          background-color: #eee; 
          border-color: #ccc;
          position: absolute;
      }
  
      /* style links */
      #test-ul &gt; li a {
          color: #2b7dbc;
          border-top-color: #e4e4e4;
          background-color: #fff;
          display: block;
          padding: 7px 0 9px 20px;
          border-top-width: 1px;
          border-top-style: dotted;
      }
  
      /* do CSS3 magic and show a vertical border on the left of each submenu item */
      #test-ul &gt; li &gt; ul::before {
          content: "";
          display: block;
          position: absolute;
          z-index: 1;
          left: 18px;
          top: 0;
          bottom: 0;
          border: 1px dotted;
          border-width: 0 0 0 1px;
      }
  &lt;/style&gt;
  </code></pre>