Aligning ::之前和::之后伪元素

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>

另一种方法是使用Flexbox将与<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; 
    }