位置：之后相对于：之前

比方说，我有一个输入显示基于某个数据属性的伪元素，并将其定位在输入的正上方，因此它充当标签。标签按预期工作，但我想根据其他参数对其进行定制，特别是，如果输入具有“必需”类，我希望在标签旁边显示红色星号。是否有可能将伪元素相对于：before伪元素进行定位？位置：之后相对于：之前

下面是一个例子：

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

这将给像这样的例子，在不要求类型，但水平的结果，但仅适用于平均长度的标签名称最佳状态工作，当标签名称太小，它只能部分地填补了星号红色：

来源

2017-06-22 driima

:after不能相对于:before Traver和Pons说。

但是有一个解决办法与display: flex;，flex-flow: row wrap;和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>

来源

2017-06-22 11:08:00 Huelfe

我喜欢它！我会将其标记为答案，因为它完全符合要求。 – driima

是否有可能来定位：相对于after伪元素：伪元素之前？答案是否定的。一个在Element之前，另一个在嵌套之后。

来源

2017-06-22 09:28:35 RacoonOnMoon

这是不可能的。绝对/固定定位元素的偏移量可以只相对于其父元素。该父母可以立即成为一级或第n级。

来源

2017-06-22 09:29:16

位置：之后相对于：之前

回答

相关问题