Как добавить границу вне элемента с помощью селектора :: before?

Question

По сути, я хочу добавить фиолетовую рамку для выбранного элемента. Я думаю, что псевдоэлемент :: before - лучший вариант здесь?

Я пробовал это, но это не очень хорошо, и он расположен рядом с текстом, а не на краю экрана:

#serverList {
  li::before {
    content: 'a';
    height: 5em;
    width: 1em;
    color: blue;
    background-color: blue;
  }
}

Спасибо!

Answer 1

Сначала необходимо добавить позицию относительно элемента отца:

 #serverList li{
    position: relative;
  }

Затем давайте поработаем с дочерним элементом (:: before)

 #serverList li::before{
    content: '';  /* is not necesary any info here */
    height: 5em;
    width: 1em;
    color: blue;
    background-color: blue;
    position: absolute; /* this is absolute to the father element*/
    left: 0; /* we want this in the point 0 of our father element*/
   }

Вы можете поиграть со свойствами сверху, слева, справа, снизу и абсолютная позиция.

Answer 2

А как насчет следующего? Вы можете использовать обертку и добавить свой контент в промежуток с центром.

.wrapper {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 12px 12px 12px 40px;
}

.wrapper::before {
  content: '';
  left: 0;
  width: 10px;
  height: 100%;
  opacity: 0;
  background: lightblue;
  position: absolute;
  transition: 0.5s all ease;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}

.wrapper:hover::before {
  opacity: 1; 
}

<div class="wrapper">
  <span>This is a text</span>
</div>
<div class="wrapper">
  <span>This is a second text</span>
</div>
<div class="wrapper">
  <span>This is another</span>
</div>

РЕДАКТИРОВАТЬ # 1

Если вы хотите сохранить состояние:

$( ".wrapper" ).each(function(index) {
    $(this).on("click", function(){
       $(this).toggleClass("active");
    });
})

.wrapper {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 12px 12px 12px 40px;
  box-shadow: 0px 0px 1px grey;
  margin-bottom: 6px;
  max-width: 200px;
}

.wrapper::before {
  content: '';
  left: 0;
  width: 10px;
  height: 100%;
  opacity: 0;
  background: lightblue;
  position: absolute;
  transition: 0.5s all ease;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}

.wrapper.active::before {
  opacity: 1; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <span>Click here</span>
</div>
<div class="wrapper">
  <span>Click here 2</span>
</div>
<div class="wrapper">
  <span>Click here 3</span>
</div>