Kann ich zwei divs horizontal mithilfe von CSS-Eigenschaften nur innerhalb der Pseudoelemente ausrichten, die den divs zugeordnet sind?

Question

Ich habe zwei divs. Ich möchte sie horizontal unter Verwendung von ::before und/oder ::after ausrichten. Der Float, die Anzeige usw. sollten nur auf die Pseudoelemente und nicht auf die beiden Divs angewendet werden, denen sie zugeordnet sind. o1 und o2 sind die Klassenattributwerte der beiden Divs.

.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

Ich glaube, Sie auf die Idee sind verwirrend, dass ein einzelne Element kann vertikal in einem Elternteil zentriert wird durch ein Pseudoelement auf den Eltern mit.

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

Doch wie Sie werden feststellen, erfordert dies nicht nur ein Elternteil aber auch zusätzliche Eigenschaften auf dem Zielelement ,, nämlich:

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

Es gibt NO Eigenschaft, die auf Pseudo-Elemente von Geschwister-divs auf Blockebene angewendet werden kann, die diese divs vertikal auf einander ausrichten würden er.

Sie müssen für die Elemente selbst ... oder ihr übergeordnetes Element ein zusätzliches Styling anwenden. In diesem Fall gibt es verschiedene Optionen für die vertikale Ausrichtung von untergeordneten Elementen.

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