Keep position of <li> hover state consistent

Question

I have a grid list with hover states. I need to have it so it just adds the border. Currently, if you hover over each one the li/option shifts a little bit and causes the other items to shift. See the markup below:

HTML:

<div id="question13" class="question-options">
<h3 class="semi-bold">Header</h3>
<fieldset class="radio">
<ul>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 1</label><span class="hide-text"></span>
</li>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 2</label><span class="hide-text"></span>
</li>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 3</label><span class="hide-text"></span>
</li>
<li class="border-blue">
<label><input type="radio" name="answers" class="semi-bold" value="8888">Option 4</label><span class="hide-text"></span>
</li>
</ul>
</fieldset>
</div>

SCSS:

.question-options {
  border: 1px solid gray;
  padding: 20px;
  ul {
      display: grid;
      display: -ms-grid;
        grid-template-columns: repeat(2,auto);
      li {
        padding-bottom: 1rem;
        margin: 0.5rem;
        position: relative;
      }
  }
}

.border-blue {
  vertical-align: middle;
  padding: 10px;
  border-radius: 5px;
  &:hover {
    padding: 10px;
    border: 2px solid blue;
  }
}

Live fiddle: https://jsfiddle.net/c736cg6h/1/

Currently if you hover over each item, you see the item "shift around" and it affects the other items - I need to figure out how to keep it so that it just adds the border and does not affect the positioning of each item. I tried adding the same padding to the hover state and removing it but both seem to make it worse.

Is this caused by grid display? How can I just add a border on hover state without the positioning being affected?

Answer 1

use border: 2px solid transparent;

.question-options {
    border: 1px solid gray;
    padding: 20px;
}
ul {
    display: grid;
    display: -ms-grid;
    grid-template-columns: repeat(2, auto);
}
li {
    padding-bottom: 1rem;
    margin: 0.5rem;
    position: relative;
}

.border-blue {
    vertical-align: middle;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid transparent;
}
.border-blue:hover {
     padding: 10px;
     border: 2px solid blue;
}

<div id="question13" class="question-options">
    <h3 class="semi-bold">Header</h3>
    <fieldset class="radio">
        <ul>
            <li class="border-blue">
                <label><input type="radio" name="answers" class="semi-bold" value="8888">Option 1</label><span class="hide-text"></span>
            </li>
            <li class="border-blue">
                <label><input type="radio" name="answers" class="semi-bold" value="8888">Option 2</label><span class="hide-text"></span>
            </li>
            <li class="border-blue">
                <label><input type="radio" name="answers" class="semi-bold" value="8888">Option 3</label><span class="hide-text"></span>
            </li>
            <li class="border-blue">
                <label><input type="radio" name="answers" class="semi-bold" value="8888">Option 4</label><span class="hide-text"></span>
            </li>
        </ul>
    </fieldset>
</div>