title: Looking to add a circle behind the navigation words on hover in CSS
body: <p>Looking to add a circle behind the navigation words on hover in CSS. </p>
  
  <p>I wanted to have the text knock out, and I think I can handle that part by making hover state text color to the background color.</p>
  
  <p>However, the circle and preventing the sliding that happens from adding padding to the text on hover is something I dont fully understand.</p>
  
  <p>My pen attempt at the navigation, but don't know how to add a circle like the attached image<a href="https://i.stack.imgur.com/wBBIy.png" rel="nofollow noreferrer">circle effect i am aiming for</a></p>
  
  <p><a href="http://codepen.io/danbenner/pen/QpazyB" rel="nofollow noreferrer">http://codepen.io/danbenner/pen/QpazyB</a></p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;Dan Benner &lt;/title&gt;
      &lt;meta name="description" content="An interactive getting started guide for Brackets."&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
  
      &lt;!--Fonts--&gt;
  
      &lt;!--Headline Fonts--&gt;
  
      &lt;!--Body Copy Fonts--&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"&gt; 
  
  
  &lt;/head&gt;
  
  
  
  
  &lt;body&gt;
  
  
          &lt;!--
  
  
  
  
  
  
  
  
  
  
  
  
  
  
          --&gt;
  
  
  
  
  
  
      &lt;div id="nav_strip"&gt;
  
  
       &lt;!--Left Side of Nav--&gt;
  
       &lt;div id="identity_container"&gt;
  
       &lt;img src="images/svgs/TypeTreatment.svg"&gt;
  
       &lt;a id="tagline" href="index.html"&gt;Strategic. Conceptual. Systematic.&lt;/a&gt;
  
  
      &lt;!--End of Identity Container--&gt;   
      &lt;/div&gt;
  
  
  
  
  
  
  
  
       &lt;!--Right Side of Nav--&gt;
       &lt;div id="nav_container"&gt;
  
          &lt;li&gt;  &lt;a href="#"&gt;WORK&lt;/a&gt; &lt;/li&gt;
  
          &lt;li&gt;  &lt;a  href="#"&gt;PROCESS&lt;/a&gt; &lt;/li&gt;
  
          &lt;li&gt;   &lt;a  href="#"&gt;ABOUT&lt;/a&gt;  &lt;/li&gt;
  
          &lt;span class="clearfix"&gt;&lt;/span&gt;
  
      &lt;/div&gt;
  
          &lt;span class="clearfix"&gt;&lt;/span&gt;
  
  
  
      &lt;/div&gt;
  
  
  
                &lt;!--
  
  
  
  
  
  
  
  
  
  
  
  
  
  
          --&gt;
  
  
  
  
  
  
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>