title: How to target CSS :after element with the tilde selector?
body: <p>The <code>::after</code> selector will inserts something after the content, is this targetable with the preceding selector <code>~</code>?</p>
  
  <p>For example, HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;One&lt;/li&gt;
      &lt;li&gt;Two&lt;/li&gt;
      &lt;li&gt;Three&lt;/li&gt;
      ::after       
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul::after { 
      content: ''; 
      display: block; 
      height: 50px;
      width: 100%;
      background: red;
  }
  
  ul li:hover ~ ::after {
      background: blue;
  }
  </code></pre>
  
  <p><strong>CODE EXAMPLE</strong></p>
  
  <p>Below you are able to find a working version of what I am after. However I did this with the "sub-menu-bar" div included. Now it seems the <code>::after</code> pseudo element is positioned at the exact location in the DOM inspector. It would be nice if it could be done without the div.</p>
  
  <p>The reason why the submenu bar is on the UL is because I don't want the bar to move when switching between two items which have a submenu.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul, li
  {
  list-style: none;
  padding: 0;
  margin: 0;
  }
  
  a 
  {
  cursor: pointer;
  display: block;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  }
  
  a &gt; * 
  {
  user-select: none;
  }
  
  ul.menu
  {
  position: relative;
  
  display: flex;
  width: 100%;
  
  flex-wrap: wrap;
  justify-content: center;
  
  background: #FFF;
  }
  
  ul.menu &gt; li.menu-item &gt; a
  {
  padding: 0px 10px;
  height: 50px;
  overflow: hidden;
  transition: height 0.3s;
  }
  
  ul.menu &gt; li.menu-item &gt; ul.sub-menu
  {
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0px;
  
  display: flex;
  width: 100%;
  height: 0px;
  
  align-items: center;
  justify-content: center;
  transition: height 0.4s;
  
  color: #FFF;
  }
  
  ul.menu &gt; li.menu-item &gt; ul.sub-menu &gt; li.menu-item
  {
  overflow: hidden;
  }
  
  ul.menu &gt; li.menu-item &gt; ul.sub-menu &gt; li.menu-item &gt; a 
  {
  padding: 0px 10px; 
  
  transform: translateY(100%);
  opacity: 1;
  
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.52, 0.16, 0.24, 1);
  transition-delay: 0s;
  transition-duration: 0.2s;
  }
  
  ul.menu &gt; div.sub-menu-bar
  {
  content: '';
  
  display: block;
  width: 100%;
  height: 2px;
  
  flex-basis: 100%;
  transition: height 0.4s;
  
  background: #000;
  }
  
  ul.menu &gt; li.menu-item-has-children:hover &gt; ul.sub-menu
  {
  height: 50px;
  }
  
  ul.menu &gt; li.menu-item-has-children:hover &gt; ul.sub-menu &gt; li.menu-item &gt; a 
  {
  transform: translateY(0%);
  opacity: 1;
  transition-delay: 0.2s;
  }
  
  ul.menu &gt; li.menu-item-has-children:hover ~ div.sub-menu-bar 
  {
  height: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="menu"&gt;
  &lt;li class="menu-item"&gt;&lt;a&gt;Item #1&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-item menu-item-has-children"&gt;
      &lt;a&gt;Item #2&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
          &lt;li class="menu-item"&gt;&lt;a&gt;Subitem #2.1&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-item"&gt;&lt;a&gt;Subitem #2.2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="menu-item menu-item-has-children"&gt;
      &lt;a&gt;Item #3&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
          &lt;li class="menu-item"&gt;&lt;a&gt;Subitem #3.1&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-item"&gt;&lt;a&gt;Subitem #3.2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a&gt;Item #4&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a&gt;Item #5&lt;/a&gt;&lt;/li&gt;
  &lt;div class="sub-menu-bar"&gt;&lt;/div&gt; &lt;!-- Can we avoid this with ::after pseudo element? --&gt;
  &lt;/ul&gt;
  
  &lt;p&gt;Content below the navigation.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>