css - Positioning pseudo elements without absolute -

i position css pseudo element vertically top of div element attached too. here code:

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

the caveats cannot use position: absolute or negative margin on pseudo element. content divs being dynamically inserted container div using flex-box , therefore position absolute doesn't work. content div's vary in height , therefore negative margin-top cannot used.

here fiddle.

by using pseudo :before instead, in combo transform: translate, can achieve this.

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