title: How not to effect adjacent elements when hovering over a element?
body: <p>I'm trying to implement workflowy bullet points using html and CSS, I have used hover to add border to a div but it affects, nearby elements, any hint to avoid this will be appreciated?</p>
  
  
  
  
  
  <pre><code>.bullets {
    display: inline-block;
    height: 7px;
    width: 7px;
    background-color: grey;
    border-radius: 50%;
  }
  
  .bullets:hover {
    border: 5px solid lightgrey;
  }
  
  p {
    display: inline;
    margin-left: 5px;
  }
  
  .bulletChild {
    margin-left: 20px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="block"&gt;
      &lt;div class="bullets"&gt;&lt;/div&gt;
      &lt;p&gt;this is workflowy clone&lt;/p&gt;
      &lt;div class="bulletChild"&gt;
        &lt;div class="bullets"&gt;&lt;/div&gt;
        &lt;p&gt;this is workflowy clone&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  
  
  <p>my fiddle: <a href="https://jsfiddle.net/renx777/mwvx8zdz/3/" rel="nofollow noreferrer">https://jsfiddle.net/renx777/mwvx8zdz/3/</a></p>