CSS, прежде чем селектор не работает

Question

Я создаю эффект парения

поэтому у меня есть простой текст домашнего и цвет фона фиолетовый

Я хочу добавить границы перед текстом, но эффект не отображается

Я использую ::before для этого

следующий мой код

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container::before { 
 
    border: 2px solid black; 
 
} 
 

 
.container { 
 
    background-color: purple; 
 
    color: white; 
 
    font-size: 50px; 
 
    width: 300px; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 80px; 
 
}

<div class="container">HOME</div>

Answer 1

::before псевдо-элемент не будет оказано, если не указано, каким оно должно отображаться.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container::before { 
 
    border: 2px solid black; 
 
    display: block; 
 
    content: "..."; 
 
} 
 

 
.container { 
 
    background-color: purple; 
 
    color: white; 
 
    font-size: 50px; 
 
    width: 300px; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 80px; 
 
}

<div class="container">HOME</div>

... но граница перед текстом звучит как левой границы:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    border-left: 2px solid black; 
 
    background-color: purple; 
 
    color: white; 
 
    font-size: 50px; 
 
    width: 300px; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 80px; 
 
}

<div class="container">HOME</div>

Answer 2

Дисплей: блок ставит коробку перед текстом ; кроме того, для того, чтобы :: before selector генерировал контент: «»; должен быть добавлен с текстом внутри. В настоящее время я скрыл содержимое, чтобы окно выглядело пустым.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container::before { 
 
    border: 2px solid black; 
 
    content: "."; 
 
    color: purple; 
 
    display: block; 
 
} 
 

 
.container { 
 
    background-color: purple; 
 
    color: white; 
 
    font-size: 50px; 
 
    width: 300px; 
 
    position: relative; 
 
    top: 50px; 
 
    left: 80px; 
 
}

<div class="container">HOME</div>