无绝对地定位伪元素

Question

我想将CSS伪元素垂直定位到它所连接的div元素的顶部。下面是代码：

HTML

<div class="container"> 
    <div class="content"> 
    text 
    </div> 
</div> 

CSS

.container { 
    padding: 20px; 
} 

.content { 
    padding: 10px; 
} 

.content::after { 
    content: ''; 
    background: red; 
    width: 10px; 
    height: 10px; 
    float: right; 
} 

的告诫是，我不能使用的位置是：绝对或伪元素阴性切缘。内容div被动态地插入到使用弹性盒的容器div中，因此绝对位置不起作用。内容div的高度也有所不同，因此无法使用负边距顶部。

这里是fiddle。

Answer 1

通过使用伪:before来代替，与transform: translate结合使用，您可以实现此目的。

.container { 
 
    padding: 20px; 
 
    background-color: #ddd; 
 
} 
 

 
.content { 
 
    width: 50%; 
 
    background: white; 
 
    padding: 10px; 
 
} 
 

 
.content:before { 
 
    content: ''; 
 
    background: red; 
 
    width: 10px; 
 
    height: 10px; 
 
    float: right; 
 
    top: 50%; 
 
    transform: translateY(-100%); 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    text text text<br> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="content"> 
 
    text text text<br> 
 
    text text text<br> 
 
    text text text<br> 
 
    text text text<br> 
 
    text text text<br> 
 
    text text text<br> 
 
    text text text<br> 
 
    </div> 
 
</div>