CSS vor Selektor nicht

Question

Arbeits

Ich schaffe einen Hover-Effekt

so habe ich einfachen Text-und Hintergrundfarbe ist lila

I Grenze vor dem Text, aber der Effekt hinzufügen möchten zeigt nicht auf

ich die ::before für die

bin mit folgenden ist mein Code

* { 
 
    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

Das ::before psuedo-Element wird nicht wiedergegeben werden, wenn Sie angeben, wie sie angezeigt werden sollen.

* { 
 
    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>

... aber eine Grenze vor dem Text klingt eher wie eine linke Grenze:

* { 
 
    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

Das Display: Block stellt die Kiste vor dem Text ; zusätzlich, damit der :: before-Selektor Inhalt erzeugt: ""; muss mit Text innerhalb hinzugefügt werden. Ich habe den Inhalt gerade versteckt, um die Box leer erscheinen zu lassen.

* { 
 
    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>