无绝对地定位伪元素

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

警告是我不能在伪元素上使用position：绝对或负边距。内容div正在动态插入到使用flex-box的容器div中，因此绝对位置不起作用。内容div的高度也不同，因此不能使用负边距 - 顶部。

这是fiddle。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;