Как задать бордер блоку, что бы слева линия была по высоте контента, а сверху и с низу (по горизонтали) длина была 30px?

Question

Уважаемые знатоки, подскажите как можно реализовать такую задачу: Есть блок, этому блоку нужно задать:

border-left
border-top
border-bottom
Всё осложняется (для меня) тем, что бордер top и bottom, должны иметь длину 30px.
У меня получается бордер top и bottom на всю ширину блока.
А border-left должен быть по высоте контента.

Answer 1

https://codepen.io/KopteLove/pen/oNKXmKB

.block {
  width: 200px;
  background-color: gray;
  position: relative;
  padding: 10px;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 30px;
    border-top: 5px solid red;
    border-bottom: 5px solid red;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-left: 5px solid red;
    border-right: 5px solid red;
  }
}

<div class="block">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin faucibus laoreet. Mauris lacinia mauris eget fermentum blandit. Sed ut elementum eros. Morbi pretium at lorem blandit fringilla. Nam efficitur velit eu lectus rhoncus molestie. Duis eu enim eu dolor tempor lobortis. Vivamus ornare urna dictum lectus luctus, eu tristique lacus suscipit. Nam venenatis enim arcu, ut molestie orci tempus in. Donec quis tempus dui. Phasellus pulvinar ut diam a posuere. Nam mollis tristique vehicula.
</div>

БЛОГ НА HUSL

Как задать бордер блоку, что бы слева линия была по высоте контента, а сверху и с низу (по горизонтали) длина была 30px?

Ответы (1 шт):