Position: nach relativ zu: vor

Question

Angenommen, ich habe eine Eingabe, die ein Pseudoelement basierend auf einem bestimmten Datenattribut anzeigt und es direkt über der Eingabe positioniert, so dass es als Beschriftung fungiert. Das Label funktioniert wie vorgesehen, aber ich möchte es basierend auf zusätzlichen Parametern anpassen, speziell wenn die Eingabe die "erforderliche" Klasse hat, möchte ich ein rotes Sternchen neben dem Label angezeigt werden. Ist es möglich, ein: after-Pseudo-Element relativ zum: before-Pseudo-Element zu positionieren?

Hier ist ein Beispiel:

.flex-form .field[data-label]:before { 
    content: attr(data-label); 
    font-weight: bold; 
    position: absolute; 
    margin-top: -16px; 
} 

.flex-form .field.required[data-label]:before { 
    content: attr(data-label) " *"; 
    background: -webkit-linear-gradient(left, #404040 0%, #404040 89%, rgba(240,47,23,1) 90%, rgba(231,56,39,1) 100%); 
    background: -o-linear-gradient(left, #404040 0%, #404040 89%, rgba(240,47,23,1) 90%, rgba(231,56,39,1) 100%); 
    background: -ms-linear-gradient(left, #404040 0%, #404040 89%, rgba(240,47,23,1) 90%, rgba(231,56,39,1) 100%); 
    background: linear-gradient(to right, #404040 0%, #404040 89%, rgba(240,47,23,1) 90%, rgba(231,56,39,1) 100%); 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

Dies diese Ergebnisse wie zum Beispiel geben, wo Typ nicht erforderlich ist, aber Ebene ist, wird aber nur dann optimal durchschnittliche Länge Markennamen für die Arbeit, als wenn der Markennamen zu klein ist, wird es nur füllen teilweise das Sternchen rot:

Answer 1

:after kann nicht relativ zu :before wie Traver und Pons gesagt werden.

Aber es gibt eine Abhilfe mit display: flex;, flex-flow: row wrap; und order:

.flex-form { 
 
    display: flex; 
 
    margin: 20px 0 0; 
 
} 
 

 
.field { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.flex-form .field select { 
 
    display: block; 
 
    flex: 1 0 100%; 
 
    order: 2; 
 
    width: 100%; 
 
} 
 

 
.flex-form .field[data-label]:before { 
 
    content: attr(data-label); 
 
    font-weight: bold; 
 
    display: block; 
 
    order: 0; 
 
} 
 

 
.flex-form .field.required[data-label]:after { 
 
    content: "*"; 
 
    display: block; 
 
    order: 1; 
 
    color: red; 
 
}

<form class="flex-form"> 
 
    <div class="field" data-label="Type"> 
 
    <select> 
 
     <option>Item</option> 
 
    </select> 
 
    </div> 
 
    <div class="field required" data-label="Level"> 
 
    <select> 
 
     <option>Level 1</option> 
 
    </select> 
 
    </div> 
 
</form>

Answer 2

ist es möglich, eine positionieren: nach pseudo-Elemente in Bezug auf das: vor Pseudo-Elemente? Antwort ist nein. Der eine ist vor dem Element und der andere nach und nicht verschachtelt.

Answer 3

Es ist nicht möglich. Die Offsets eines absoluten/fest positionierten Elements können nur relativ zu ihrem übergeordneten Element sein. Dieser Elternteil kann unmittelbar eine oder eine n-te Ebene sein.