Disable offsetting content on hover selector - css

Question

When I'm hovering content inside div I'm getting offsets toward right side, I know that's because I'm adding left border, but how can I avoid this?
ul li:hover {
border-left: 4px solid #FF2F5A;
}
https://jsfiddle.net/eeeek/j8xaru7m/

Answer 1

While one can set a transparent border for the non-hovered state, that might sometimes given unwanted alignment.
Here is a solution using a pseudo element that overcomes that. The position: relative; on the ul li is necessary for the absolute positioned pseudo to position itself properly.
ul li {
position: relative; /* added property */
margin-left: -26px;
list-style-type: none;
width: 491px;
height: 50px;
border-bottom: 1px solid #F2F2F2;
}
ul li > span {
line-height: 40px;
margin-left: 30px;
}
ul li:hover::before { /* updated rule */
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 4px; background: #FF2F5A;
}
.items {
position: absolute;
margin-left: -17.7px;
}
.block-with-items-style {
margin-left: 50px;
height: 400px;
width: 300px;
border: 2px solid #f2f2f2;
box-shadow: 2px 2px 10px #adadad;
resize: vertical;
overflow: hidden;
}
<div class="block-with-items-style">
<div class="items">
<ul>
<li ng-repeat="record in records">
<span>1</span>
<span class="badge badge-style">2</span>
<button class="delete" ng-click="Delete($index)">3</button>
</li>
</ul>
</div>
</div>
Bonus: This way one can easily add an animation as well
ul li {
position: relative; /* added property */
margin-left: -26px;
list-style-type: none;
width: 491px;
height: 50px;
border-bottom: 1px solid #F2F2F2;
}
ul li > span {
line-height: 40px;
margin-left: 30px;
}
ul li::before { /* added rule */
content: '';
position: absolute;
top: 50%; left: 0; bottom: 50%;
width: 4px; background: #FF2F5A;
transition: top .5s, bottom .5s;
}
ul li:hover::before { /* updated rule */
top: 0; bottom: 0;
}
.items {
position: absolute;
margin-left: -17.7px;
}
.block-with-items-style {
margin-left: 50px;
height: 400px;
width: 300px;
border: 2px solid #f2f2f2;
box-shadow: 2px 2px 10px #adadad;
resize: vertical;
overflow: hidden;
}
<div class="block-with-items-style">
<div class="items">
<ul>
<li ng-repeat="record in records">
<span>1</span>
<span class="badge badge-style">2</span>
<button class="delete" ng-click="Delete($index)">3</button>
</li>
</ul>
</div>
</div>

Answer 2

Just create invisible (100% alpha) border with previous css directive. As long hover is active – it will overwrite that transparent border with red. Here's the code:
ul li {
margin-left: -26px;
list-style-type: none;
width: 491px;
height: 50px;
border-bottom: 1px solid #F2F2F2;
}
ul li > span {
line-height: 40px;
margin-left: 30px;
}
/* Sylogista's upgrade begin */
ul li:not(:hover)
{
border-left: 4px solid rgba(255,255,255,0);
}
/* Sylogista's upgrade end */
ul li:hover {
border-left: 4px solid #FF2F5A;
}
.items {
position: absolute;
margin-left: -17.7px;
}
.block-with-items-style {
margin-left: 50px;
height: 400px;
width: 300px;
border: 2px solid #f2f2f2;
box-shadow: 2px 2px 10px #adadad;
resize: vertical;
overflow: hidden;
}
<div class="block-with-items-style">
<div class="items">
<ul>
<li ng-repeat="record in records">
<span>1</span>
<span class="badge badge-style">2</span>
<button class="delete" ng-click="Delete($index)">3</button>
</li>
</ul>
</div>
</div>
:not(:hover) is optional. Code will work good without it, but in my opinion – using that can be good practice. When? That's not place for debate, but let me give one short example in the margin of that answer: when you're creating huge css using many of states in that way and relations between elements – it just looks clearer.
In that case it's clearer maybe without it, but I'll not change that. Even just because of that not so many people use :not or even remember about that.