如何在浮动上下文中放置绝对伪元素？

Question

我的图片的容器在左侧浮动。我的内容包含伪元素位于绝对位置的元素。浮动元素处于相对位置，但绝对元素没有正确的上下文。

.float-left {
  float: left;
  margin-right: 2rem;
}

.more {
  background: blue;
  border: 1px solid red;
  color: #fff;
  position: relative;
}

.more::before {
  content: 'A';
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.listitems {
  list-style-type: none;
}

.listitems li {
  padding-left: 1.5rem;
  position: relative;
}

.listitems li::before {
  content: '֎';
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="container">
  <div class="float-left">
    <img src="//via.placeholder.com/150x200" alt="">
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis corporis dolor doloremque error esse explicabo harum hic, laborum nostrum qui quisquam sit sunt, temporibus voluptates! Accusantium atque corporis doloribus illo illum iure nemo neque.</p>
    <p class="more">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis corporis dolor doloremque error esse explicabo harum hic, laborum nostrum qui quisquam sit sunt, temporibus voluptates! Accusantium atque corporis doloribus illo illum iure nemo neque.</p>
    <ul class="listitems">
      <li>Items 1</li>
      <li>Items 2</li>
      <li>Items 3</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis corporis dolor doloremque error esse explicabo harum hic, laborum nostrum qui quisquam sit sunt, temporibus voluptates! Accusantium atque corporis doloribus illo illum iure nemo neque.</p>
  </div>
</div>

jsfiddle demo