Можно ли выровнять два divs горизонтально, используя свойства CSS только внутри псевдоэлементов, связанных с divs?

Question

У меня есть два div. Я хочу выровнять их по горизонтали, используя ::before и/или ::after. Поплавок, отображение и т. Д. Должны применяться только к псевдоэлементам, а не к двум разделителям, с которыми они связаны. o1 и o2 - значения атрибута класса для двух разделов.

.o1 { 
 
     border: 10px solid red; 
 
     border-radius: 50px; 
 
     width:30px; 
 
     height:30px; 
 
    } 
 

 
    .o1::after { } 
 

 
    .o2 { 
 
     border: 10px solid orange; 
 
     border-radius: 50px; 
 
     width:30px; 
 
     height:30px; 
 
    } 
 

 
    .o2::before { }

<div class="o1"></div><!-- 
 
    --><div class="o2"></div>

Answer 1

NO

Я думаю, вы смешиваете идею о том, что одного элемент может быть центрирован в родителя с помощью псевдо-элемента на родителя.

* {-webkit-box-sizing: border-box; 
 
-moz-box-sizing: border-box; 
 
box-sizing: border-box;} 
 

 
.o1 { 
 
    border: 10px solid red; 
 
    border-radius: 50%; 
 
    width: 60px; 
 
    height: 60px; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 

 
.parent { 
 
    height: 90px; 
 
    background: pink; 
 
    white-space: nowrap; 
 
} 
 

 
.parent::before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    margin-right: -0.25em; /* Adjusts for spacing */ 
 
}

<div class="parent"> 
 
    <div class="o1"></div> 
 
</div>

Однако, как вы заметите, это требует не только родителей, но также дополнительные свойства на целевом элементе ,, а именно:

vertical-align: middle; 
    display: inline-block; 

Существует NO, которое может быть применено к псевдоэлементам дочерних блоков уровня блочного уровня, которые будут вертикально выравнивать те divs к каждому другому э.

Вам необходимо применить дополнительный стиль к самим элементам .. или их родительский элемент , и в этом случае существуют различные варианты вертикального выравнивания дочерних элементов.

.o1 { 
 
    border: 10px solid red; 
 
    border-radius: 50px; 
 
    width:30px; 
 
    height:30px; 
 
} 
 

 
.o2 { 
 
    border: 10px solid orange; 
 
    border-radius: 50px; 
 
    width:30px; 
 
    height:30px; 
 
} 
 

 
[class^="o"] { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="o1"></div><!-- 
 
--><div class="o2"></div>