关于前端:css实现一个竖线

前端常常会收到这样一个款式需要，须要写一个竖线或者横线。

我的实现

   .splitLine {
        width: 1px;
        height: 20px;
        background: #D1D5D9;
        margin-top: unset;
        margin-left: 18px;
        margin-right: 30px;
    }

    .splitLine:before {
        content: '';
        display: inline-block;
    }

  <div class="splitLine"></div>

如果是横线的话，间接批改 width 和 height 就行。

css 不是很善于，如果有更好的方法，心愿大佬们不吝赐教