title: Get the active link to remain bold and not only become bold when I click on it
body: <p>I am aware of both <code>:visited</code> and <code>:active</code> css classes, but both does not answer my need!</p>
  
  <p>I want to remain the active link styled with <strong>Red Background Color</strong> (or whatever design) as long as the related page of the active link is active for the user.</p>
  
  <p><strong>Below is my code:</strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a class="link1" href="/page-1"&gt;Link 1&lt;/a&gt;
  &lt;a class="link2" href="/page-2"&gt;Link 2&lt;/a&gt;
  &lt;a class="link3" href="/page-3"&gt;Link 3&lt;/a&gt;
  &lt;a class="link4" href="/page-4"&gt;Link 4&lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>link2:visited {
      background-color: red;
  }
  </code></pre>
  
  <p>Or</p>
  
  <pre><code>link2:active {
      background-color: red;
  }
  </code></pre>
  
  <p>The <code>:active</code> class will take effect when the user click down the mouse button and end when the user will release up the mouse button.</p>
  
  <p>The <code>:visited</code> class will remain the link with red background even after the user will click on another menu link.</p>
  
  <p>so both <code>:visited</code> and <code>:active</code> css classes does answer my question !!!</p>
  
  <p><strong>The below images will explain more:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/5dVUk.png" rel="nofollow noreferrer">Link 2 is active</a></p>
  
  <p><a href="https://i.stack.imgur.com/cMMGi.jpg" rel="nofollow noreferrer">Link 4 is active</a></p>
  
  <p>As you can see in the above images when another link on the menu is clicked/visited, the previous link design will be reverted back to its previous state and only the current clicked/visited link will have a red background color as long as its correspondent page is active.</p>