Search code examples
cssrxaringanremarkjs

"Short" vertical border between columns in xaringan / remark

How would I create a "short" vertical border between columns in xaringan / remark?

I want to add a vertical border between columns in my slides, but one that's only about 80% the height of the div. Here's the xaringan example for two column layout: https://slides.yihui.name/xaringan/#15

I suppose the css for the border of the left column could look something like this:

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

But how can I get it to be a little shorter than the height of the div?

Solution

  • Yes, you can create 80% height from the parent 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;
}