類似::前と::後の擬似要素

Question

この例で私が何をしているのか誰にも説明できますか？私は両側に線を持つdivを作成しようとしています。

.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

私は擬似要素の絶対位置を使用することをお勧めします。また、パーセント値を使用して柔軟性を高めるように更新されました。

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

それとも、あなたはその後、垂直整列とインラインブロックを使用 <span>タグを追加することができます。

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

もう一つの方法は、<span>タグまたはそうでフレキシボックスを使用することです。

.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

フロートを追加してください：左;

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