Sizing and positioning a border property

css, html

Solution

You can use `:before` pseudo element with `position: absolute`

.column {
  position: relative;
  height: 200px;
  width: 100px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.column:before {
  content: '';
  height: 50px;
  width: 3px;
  background: red;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

<div class="column">Column</div>

Problem

Is there a css where I could size and position the `border-left` property? Or a "hack"? Below shows what I'd like to have. The black rectangle represents the column and the red, the border I'd like to have on that column. Possible? If not, could I add another div inside then give that div the border property?

Original source