«Короткая» вертикальная граница между столбцами в xaringan / примечании

Question

Как бы я создал "короткую" вертикальную границу между столбцами в xaringan / note?

Я хочу добавить вертикальную границу между столбцами в моих слайдах, но такую, которая составляет всего около 80% высоты элемента div.Вот пример xaringan для макета с двумя столбцами: https://slides.yihui.name/xaringan/#15

Полагаю, что css для границы левого столбца может выглядеть примерно так:

.pull-left {
  border-right-width: 1px;
  border-right-style: solid;
  padding-right: 2px
}

Но как я могу его получить?быть немного короче высоты div?

Answer 1

Да, вы можете создать 80% высоты от родительского div

<div></div>

div {
height:200px;
width:500px;
background:gold;
position:relative;
border-top:10px solid grey;
border-bottom:2px solid #000;
}
div:after {
    content:"";
    position:absolute;
    top:20%;
    right:0;
    width:2px;
    height:60%;
    background:#000;
}