Sylar Sylar - 1 month ago 6
CSS Question

Sizing and positioning a border property

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?

enter image description here

Answer

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>

Comments