title: Triggering Anchor ::after Pseudo Content When Hovering Over Different Element
body: <p>The issue is pretty straightforward -- I have an anchor in a nav that generates an arrowhead character as ::after pseudo content in CSS when hovering/mouseentering on it:</p>
  
  <p><a href="https://i.stack.imgur.com/Yhd9A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yhd9A.jpg" alt="enter image description here"></a></p>
  
  <p>However, obviously that character goes away when mouseing out and then hovering on a different anchor in the dropdown menu below it:</p>
  
  <p><a href="https://i.stack.imgur.com/zOdbZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zOdbZ.jpg" alt="enter image description here"></a></p>
  
  <p>Here's the rudimentary CSS to accomplish the first hover state:</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>.nav &gt; li.dropdown &gt; a:hover:after {
   display: block;
   position: relative;
   top: 2px;
   width: 100%;
   text-align: center;
   content: "\25B2";
   color: #ccc;
  }
  
  ul.dropdown-menu &gt; li &gt; a:hover {
   padding: 10px 15px;
   color: #0096d6;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Since this is a common enough utilization of navigation elements, I'm hoping there's some way via Javascript to keep that ::after content displayed on the top anchor when triggering a separate anchor in the dropdown menu below it. I'm aware that jQuery can't access ::after elements since they are not expressed via the DOM, but I have seen examples of creating ::after content via adding style tags to document heads in straight Javascript, though I don't believe that approach would provide me a solution. Is there a scenario where hovering on one element can trigger a separate element's ::after content using Javascript? Many thanks for any help you can provide here.</p>
  
  <p><strong>UPDATE:</strong> As requested, here is a relevant HTML snippet. Note I have also revised the CSS above to reflect the dropdown hover state.</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-html lang-html prettyprint-override"><code>&lt;ul class="nav navbar-nav"&gt;
   &lt;li class="dropdown"&gt;
    &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Tools and Information&lt;/a&gt;        
    &lt;ul class="dropdown-menu"&gt;
     &lt;li&gt;&lt;a href="/foo"&gt;Print Permanence&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="/foo2"&gt;Another Link&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>