title: Pseudo element :hover on ::before
body: <p>I am looking to add a small circle to a Pseudo element using <code>:hover but</code> my wanted result is for the circle to appear <code>::before</code> without moving the text itself. I am looking to apply this method eventually to navbar's using images. </p>
  
  <p>Here is my HTML example:</p>
  
  <pre><code>&lt;div class="bla"&gt;
    &lt;p&gt;&lt;a class="circle"&gt;Hello Circle&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS example:</p>
  
  <pre><code>.bla {
  left: 300px;
  position: relative;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.circle:hover::before{
  content: "";
  height: 20px;
  width: 20px;
  background-color:#D13335;
  border-radius: 50%;
  webkit-border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  float: left;
  
  }
  </code></pre>