Ausrichten :: vor und :: nach Pseudo-Elementen

Question

Kann mir jemand erklären, was ich in diesem Beispiel falsch mache? Ich versuche div zu erstellen, das auf beiden Seiten Linien hat.

.bottom-logo { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 100%; 
 
    background-color: orange; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.bottom-logo::before { 
 
    content: ""; 
 
    margin-right: 50px; 
 
    margin-top: 20px; 
 
    border-bottom: 4px solid black; 
 
    display: inline-block; 
 
    width: 100px; 
 
    float: right; 
 
} 
 

 
.bottom-logo::after { 
 
    content: ""; 
 
    display: inline-block; 
 
    border-bottom: 4px solid black; 
 
    width: 100px; 
 
    margin-left: 50px; 
 
}

<div class="bottom-logo"></div>

Answer 1

Ich würde vorschlagen, absolute Position für die Pseudo-Elemente zu verwenden. Auch aktualisiert, um Prozentwerte zu verwenden, um es flexibler zu machen.

.bottom-logo { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 100%; 
 
    background-color: orange; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.bottom-logo::before, 
 
.bottom-logo::after { 
 
    content: ""; 
 
    border-bottom: 4px solid black; 
 
    width: 100px; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.bottom-logo::before { 
 
    right: 100%; 
 
} 
 

 
.bottom-logo::after { 
 
    left: 100%; 
 
}

<div class="bottom-logo"></div>

Oder können Sie einen <span> Tag fügen Sie dann mit vertikalen align Inline-Block verwenden.

.bottom-logo { 
 
    text-align: center; 
 
} 
 

 
.bottom-logo span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 100%; 
 
    background-color: orange; 
 
} 
 

 
.bottom-logo::before, 
 
.bottom-logo::after { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    content: ""; 
 
    border-bottom: 4px solid black; 
 
    width: 100px; 
 
}

<div class="bottom-logo"><span></span></div>

Ein anderer Weg ist Flexbox mit einem <span> Tag oder so zu verwenden.

.bottom-logo { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.bottom-logo span { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 100%; 
 
    background-color: orange; 
 
} 
 

 
.bottom-logo::before, 
 
.bottom-logo::after { 
 
    content: ""; 
 
    border-bottom: 4px solid black; 
 
    width: 100px; 
 
}

<div class="bottom-logo"><span></span></div>

Answer 2

Bitte fügen Sie float: left;

.bottom-logo::after { 
     content: ""; 
     display: inline-block; 
     border-bottom: 4px solid black; 
     width:100px; 
     margin-left:50px; 
     float:left; 
    }