title: CSS how to create only one dotted/small circle or small image circle under text
body: <p>The currently css design is underline.
  Here is the currently design  code.</p>
  
  <pre class="lang-css prettyprint-override"><code>ul#mainnav &gt; li.current &gt; a span {
    color: #e1472f;
    border-bottom: 1px solid #e1472f;
    padding-bottom: 2px;
  }
  </code></pre>
  
  <p>I need to switch the underline to only one doc or small circle img.
  I had attach the design am trying to achieve. </p>
  
  <p><a href="https://i.stack.imgur.com/i90rk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i90rk.png" alt="enter image description here"></a></p>
  
  <p>I had read through similar link
  <a href="https://stackoverflow.com/questions/44236541/how-to-create-a-dot-small-circle-under-text">How to create a dot / small circle under text?</a></p>
  
  <p>If possible I need all the code stick with one category, like underline style coding
  Appreciate your answer.<br>
  Thank you</p>