Displaying a centred vertical dashed line above div using CSS-CodePudding

Trying to create a vertical dashed line above each of the progress-container divs, that sits directly centre on top and spans the full possible height. The only way I've managed to create something similar is by adding a left border, but obviously this isn't centered.

This is a simplified demo and each input/icon represent a rendered React component so using pure CSS is my ideal scenario.

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

.progress-container {
  height: 22px;
  width: 22px;
  margin-right: 16px;
  background-color: red;
  display: flex;
}

.input-wrapper {
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

<div class="wrapperDiv">
  <div class="progress-container"></div>
  <div class="input-wrapper">
    <div class="input">I have my first input here</input>
    </div>
  </div>

CodePudding user response：

Handle this behaviour with absolutely positioned pseudo-elements so that you don't have to wrangle with the natural document flow of elements.

Use CSS counters to handling the incrementing logic programmatically.

Consider responsive container heights as well to account for varying content lengths:

/* BEM naming convention used to keep selectors flat */

.progress-wrapper {
  counter-reset: step;    /* Set a counter named 'step', and its initial value is 0. */
}

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

.progress-step::after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  left: 11px;               /* relative to marker width */
  top: 5px;                 /* offset top */
  height: 100%;             /* responsive heights */
  margin: auto;
  border-left: 2px dashed black;
  z-index: -1;              /* handle stacking context */
}

.progress-step--no-step::after { /* handle the last exception, not every instance */
  display: none;          
}

.progress-step__marker {
  height: 22px;
  width: 22px;
  margin-right: 16px;
  background-color: red;
  display: flex;
}

.progress-step__marker::before {
  counter-increment: step;  /* Increment the value of section counter by 1 */
  content: counter(step);   /* Display incremented counter value */
  text-align: center;
  width: 100%;
  line-height: 22px;        /* relative to marker height */
}

.input-wrapper {
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

.input-wrapper--large {
  height: 200px;
}

<div class="progress-wrapper">
  <div class="progress-step">
    <div class="progress-step__marker"></div>
    <div class="input-wrapper">
      <div class="input-wrapper__input">I have my first input here</div>
    </div>
  </div>
  <div class="progress-step">
    <div class="progress-step__marker"></div>
    <div class="input-wrapper input-wrapper--large">
      <div class="input-wrapper__input">I have my second input here</div>
    </div>
  </div>
  <div class="progress-step progress-step--no-step">
    <div class="progress-step__marker"></div>
    <div class="input-wrapper">
      <div class="input-wrapper__input">I have my third input here</div>
    </div>
  </div>
</div>