Is there a LI equivalent for box-sizing: border-box? - css

Question

I have a nav bar that consists of an UL with several LI items. The active nav button has a different background color, but I also need a small bottom border on the button.
When applying a border, this appears outside of the LI. When working with divs, you can use box-sizing:border-box to get the borders inside the div. But how can you offset the border on a LI item ??? (list-style-position seems to have no effect)
My scss code:
nav {
ul {
li {
float: left;
padding: 0;
box-sizing: border-box;
list-style-position: inside;
&.active {
background-color: white;
border-bottom: solid 6px blue;
box-sizing: border-box;
list-style-position: inside;
}
}
}
}

Answer 1

When working with divs, you can use box-sizing:border-box to get the
borders inside the div.
To clarify, box-sizing:border-box does not make the border to be within the element (change offset), it make the border size be included in the width or height, when set, so i.e. if you give li a height of 25px and bottom border 5px, the inner height will decrease to 20px.
But how can you offset the border on a LI item
You can't offset the border, one workaround to show/hide a border on an element is to use a pseudo element, which will avoid having the element jump/resize when toggle the border, but there are more ways, such as linear-gradient (shown in below sample when hover)
body {
background: lightgray;
}
nav ul li {
position: relative;
float: left;
padding: 0 5px;
list-style-type: none;
}
nav ul li.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: -6px;
background-color: white;
border-bottom: solid 6px blue;
z-index: -1;
}
/* or one can use linear-gradient */
nav ul li:hover {
background: linear-gradient(
to bottom, white calc(100% - 5px), blue 5px
) no-repeat left bottom;
}
<nav>
<ul>
<li>
Some text
</li>
<li>
Some text
</li>
<li class="active">
Some text
</li>
<li>
Some text
</li>
</ul>
</nav>
Updated
There is actually a way to offset the border, using border-image-outset, shown in this answer:
border-image-outset in CSS

Answer 2

Another fast and clean way to create an inside border is to create an inset shadow without a blur. You don't even need box-sizing or list-style.
nav {
ul {
li {
float: left;
padding: 0;
&.active {
background-color: white;
box-shadow: 0px -6px 0px red inset;
}
}
}
}