Displaying a centred vertical dashed line above div using CSS

Trying to create a vertical dashed line above each of the progress-container divs, that sits … Read more Displaying a centred vertical dashed line above div using CSS

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:

  border-left: 1px dotted black;
  height: 100%;

but obviously this isn’t centered, codepen here:
https://codepen.io/simoncunningham/pen/mdwMgyL

This is a simplified codepen 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>

Source: CSS – Stack Overflow


Categories: NewsTags: , ,

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *