css设置border高度

By | 2023年8月23日

需求

一个li元素,高度60px,宽度150px,右侧增加一个高度30px,宽度3px,居中显示的黄色border

解决方法

直接通过设置border无法控制高度,可以通过伪元素::after来实现

&::after {
      content: '';
      width: 3px;
      height: 30px;
      background-color: #ffa40c;
      display: block;
      position: absolute;
      right: 0px;
    }