title: Adding a bottom border on hover, CSS only
body: <p>How can I make a line appear only on the bottom of a linked image when hovered?</p>
  
  <p>I can get an inner border to display on hover, but I only want border-bottom to display.</p>
  
  <p>Here is what I have so far, even though it is with the outline property instead of border:</p>
  
  <pre><code>#links a img, #links a{ border: none; float: left; }
  #links a{ margin: 3px; }
  #links a:hover{ outline: 3px solid black; }
  </code></pre>
  
  <p><strong>Not hovered:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/tPICN.png" alt="enter image description here"></p>
  
  <p><strong>Hovered:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/UIMP7.png" alt="enter image description here"></p>