Stop :after 元素跳转到换行的下一行

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

弹性容器上的 ::before 和 ::after 伪元素被认为是弹性项目。

::before伪是第一项。 ::after 伪是最后一个。所以你必须将它们视为其他弹性项目的兄弟姐妹。

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

Answer 2

这是什么 CSS 预处理器？我使用了 CodePen 上的每个预编译器并从 $variables 中得到错误，所以我删除了它们并用任何东西填充它们。这是手写笔吗？无论如何，除了变量被删除和一些颜色变化之外，唯一显着的变化是我将 flex-wrap:wrap 更改为 flex-wrap:nowrap。

片段

.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">
  <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>

Stop :after 元素跳转到换行的下一行

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

css

pseudo-element

flexbox