Add two Accent lines to left side of Card/div

Issue

I am looking for a suggestion for best practice in regards to adding two outside lines to the left side of my card/div. I have added divs with span tags at the bottom of my cards and gave them border bottom and positioned them absolute to allow me to position the borders below the card. However this does not work when I try to do the same thing with border-left. Any suggestions how to get the desired left lines? Below is a image of what I am trying to accomplish.

Desired left aligned lines

 .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>

Solution

Use ::before and ::after Pseudo-Elements

.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>

Answered By - James