Displaying a centred vertical dashed line above div using CSS

Question

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>

Can you clarify what you mean by "a vertical dashed line above the container"? If it's the border-top, it'll be a horizontal line. If it's border-left, it'll be a vertical line. Also, can you add the dashed border CSS to the codepen? — WOUNDEDStevenJones, Sep 15 '21 at 14:36
This is often handled through the use of an absolutely-positioned pseudo-element. That's what I'd do. — isherwood, Sep 15 '21 at 14:36
[Here's an example.](https://stackoverflow.com/questions/40617217/adding-css-border-to-after-element) — isherwood, Sep 15 '21 at 14:40
that's useful. but I still run into the issue of the positioning of the vertical line. — cts, Sep 15 '21 at 14:44
Have updated the question to include the vertical line I'm trying to achieve.. — cts, Sep 15 '21 at 14:46
How is the height of the vertical line above the red progress container determined? — A Haworth, Sep 15 '21 at 14:53
Updated codepen: https://codepen.io/simoncunningham/pen/mdwMgyL (line not showing, not sure :before works in codepen) — cts, Sep 15 '21 at 15:07
The dotted line is showing and seems OK. Not sure what the question is now! — A Haworth, Sep 15 '21 at 16:18

UncaughtTypeError · Accepted Answer · 2021-09-15T15:37:13.417

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>

Displaying a centred vertical dashed line above div using CSS

1 Answers1