将分隔元素与其周围的重复元素居中对齐

Question

我需要创建一个像这样的部分：

这是我已经尝试过的：

        <div class="container">
            <div
                v-for="(step, index) in steps"
                :key="index"
                class="step"
            >
                <div class="content">
                    <div class="icon">
                        // ICON CONTENT
                    </div>
                    <h3 class="title">
                      //  TITLE CONTENT
                    </h3>
                    <p class="description">
                      //  DESCRIPTION CONTENT
                    </p>
                </div>
                <div
                    v-if="index + 1 < steps.length"
                    class="step-process__divider"
                />
            </div>
        </div>

和CSS：

.container {
        display: flex;
        justify-content: space-between;
    }
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .step {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

    .divider {
        background-color: #d9d9d9;
        border-radius: .2rem;
        height: 2px;
        width: 3rem;
        margin-top: 1.2rem;
        transform: translateY(-50%);
        margin: {
            left: $spacing--22;
            right: $spacing--22;
        }
    }

...

问题是分隔线看起来并不总是位于两个步骤元素之间的中心。

有没有更好的方法来实现这个目标？

Answer 1

我希望您使用 CSS-pseudo 元素和 CSS-selectors，具体来说，

:not

、

first-child

、

last-child

、

before

和

after

。

您可以使用

:not

选择器获取不是第一个或最后一个的子元素，即它们之间的任何内容，然后在组件之前和之后添加行。

请参阅此工作示例：

.container {
  display: flex;
  justify-content: space-between;
}

.content {
  display: flex;
  align-items: center;
  text-align: center;
}

.step {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.divider {
  background-color: #d9d9d9;
  border-radius: .2rem;
  height: 2px;
  width: 3rem;
  margin-top: 1.2rem;
  transform: translateY(-50%);
  margin: {
    left: $spacing--22;
    right: $spacing--22;
  }
}

.custom-class:not(:first-child):not(:last-child) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-class:not(:first-child):not(:last-child)::before {
  content: '—';
}

.custom-class:not(:first-child):not(:last-child)::after {
  content: '—';
}

<div class="container">
  <div v-for="(step, index) in steps" :key="index" class="step">
    <div class="content">
      <div class="custom-class icon">
        ICON CONTENT
      </div>
      <h3 class="custom-class title">
        TITLE CONTENT
      </h3>
      <p class="custom-class description">
        DESCRIPTION CONTENT
      </p>
    </div>
    <div v-if="index + 1 < steps.length" class="step-process__divider" />
  </div>
</div>