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

Question

我有一些漂亮的 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;
            }
        }
    }
}

这是使用它的 HTML:

<div class="processBar">
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>
</div>

这是它的作用:

但是在一定尺寸下 :after 元素可以跳下来，如下所示:

我不明白为什么会这样。我怎样才能阻止它发生？

Answer 1

flex 容器上的 ::before 和 ::after 伪元素被认为是 flex 元素。

::before 伪是第一项。 ::after 伪是最后一个。因此，您必须将它们视为其他 flex 元素的 sibling 。

您可以尝试使用 order 属性重新排列元素以达到您想要的效果。