"Short" xaringan / remark 中列之间的垂直边框

Question

如何在 xaringan / remark 中的列之间创建 "short" 垂直边框？

我想在我的幻灯片中的列之间添加垂直边框，但只有 div 高度的 80%。这是两列布局的 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;
}

"Short" xaringan / remark 中列之间的垂直边框

"Short" vertical border between columns in xaringan / remark

css

r

remarkjs

xaringan