在Card/div的左侧添加两条重音线

Question

我正在寻找一个最佳实践的建议，在我的卡/div的左边添加两个外部行。我增加了div与跨度标签在我的卡底部，并给他们边框底部和定位他们绝对允许我定位的边界低于卡。然而，当我试图对左边锋做同样的事情时，这是行不通的。有什么建议如何得到想要的左行吗？下面是我想要完成的事情的图片。

所需左对齐线

​

 .lines {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .line-1 {
            position: absolute;
            width: 95%;
            border-bottom: $secondary-color 2px solid;
            bottom: -15px;
        }

        .line-2 {
            position: absolute;
            width: 70%;
            border-bottom: $primary-color 2px solid;
            bottom: -30px;
        }
    }

 <div class="lines">
            <span class="line-1"></span>
            <span class="line-2"><span class="spacer"></span></span>
        </div>

​

Answer 1

使用::before和::after伪元素

​

.lines {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  position: relative;
  margin-left: 50px;
}

.lines::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 80%;
  background: #f00;
}

.lines::after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background: #f00;
}

<div class="lines"></div>

​