Stop :after element from jumping to the next row on wrap - css

Question

I have some beautiful CSS:
$itemHeight: 40px;
$arrowModifier: 8;
$pageBackgroundColor: $color-gray-50;
.processBar {
display: flex;
flex-wrap: wrap;
&_item {
display: inline-block;
background: $color-gray-200;
height: $itemHeight;
position: relative;
flex-grow: 1;
text-align: center;
line-height: $itemHeight;
text-decoration: none;
color: $color-text;
padding-left: 10px;
padding-right: 10px;
&:hover {
text-decoration: none;
color: $color-text;
}
&-default {
&:hover {
background: $color-light-gray;
}
}
&-selected {
background: $color-white;
}
&:before,
&:after {
display: inline-block;
content: "";
border-style: solid;
position: absolute;
}
&:first-child {
&:before {
left:0;
border: none;
}
}
&:not(:first-child) {
&:before {
left:0;
border-color: transparent transparent transparent $pageBackgroundColor;
border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
}
}
&:last-child {
&:after {
right: 0;
border: none;
}
}
&:not(:last-child) {
&:after {
right:0;
border-color: $pageBackgroundColor transparent;
border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
}
}
}
}
Here is the HTML that uses it:
<div class="processBar">
Label
Label
Label
Label
Label
Label
</div>
Here is what it does:
But at a certain size the :after elements can jump down, as seen here:
I don't understand why that is happening. How can I stop it from happening?

Answer 1

The ::before and ::after pseudo-elements on a flex container are considered flex items.
The ::before pseudo is the first item. The ::after pseudo is the last. So you have to think of them as siblings of the other flex items.
You can try using the order property to re-arrange items to achieve the effect you want.

Answer 2

What CSS pre-processor is this? I used every pre-compiler on CodePen and got errors from the $variables so I removed them and filled them in with whatever. Is this Stylus? Anyways, besides the variables being removed and some color changes, the only significant change is that I changed flex-wrap:wrap to flex-wrap:nowrap.
SNIPPET
.processBar {
display: flex;
flex-wrap: nowrap;
}
.processBar_item {
display: inline-block;
background: #c8c8c8;
height: 40px;
position: relative;
flex-grow: 1;
text-align: center;
line-height: 40px;
text-decoration: none;
color: #000;
padding-left: 10px;
padding-right: 10px;
}
.processBar_item:hover {
text-decoration: none;
color: red;
}
.processBar_item-default:hover {
background: #808080;
}
.processBar_item-selected {
background: cyan;
}
.processBar_item:before,
.processBar_item:after {
display: inline-block;
content: "";
border-style: solid;
position: absolute;
}
.processBar_item:first-child:before {
left: 0;
border: none;
}
.processBar_item:not(:first-child):before {
left: 0;
border-color: red;
border-width: 20px 0 20px 5px;
}
.processBar_item:last-child:after {
right: 0;
border: none;
}
.processBar_item:not(:last-child):after {
right: 0;
border-color: tomato;
border-width: 20px 0 20px 5px;
}
<div class="processBar">
Label
Label
Label
Label
Label
Label
</div>