Узнать больше в PURE CSS

Question

Попытка реализовать код CSS read more, используя ТОЛЬКО CSS с НЕТ JavaScript. Вот это html:

.has-read-more {
  position: relative;
  width: 300px;
}

.has-read-more div {
  height: 160px;
  overflow: hidden;
}

.show-more {
  position: absolute;
  bottom: 10px;
  width: 140%;
  text-align: center;
  cursor: pointer;
  margin: 0;
  margin-left: -20%;
}

.show-more:after {
  content: "read more";
  background-image: linear-gradient(to bottom, transparent, white);
  padding-bottom: 10px;
  display: block;
  font-weight: bold;
  color: black;
}

.show-more span {
  background: white
}

input[type=checkbox]:checked {
  display: none;
}

input[type=checkbox]:checked+div {
  height: auto;
}

<div class="has-read-more">
  <input type="checkbox" class="show-more">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet ornare odio, at cursus nisi. Suspendisse sodales ante mollis posuere finibus. Sed erat nibh, efficitur vitae venenatis sit amet, ornare et ligula. Suspendisse hendrerit nulla
      quam, at hendrerit justo lacinia quis. Nunc nec dui in enim suscipit egestas et ut augue.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet ornare odio, at cursus nisi. Suspendisse sodales ante mollis posuere finibus. Sed erat nibh, efficitur vitae venenatis sit amet, ornare et ligula. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet ornare odio, at cursus nisi. Suspendisse sodales ante mollis posuere finibus. Sed erat nibh, efficitur vitae venenatis sit amet, ornare et ligula. Suspendisse hendrerit nulla
      quam, at hendrerit justo lacinia quis. Nunc nec dui in enim suscipit egestas et ut augue.</p>
    <p>Sed erat nibh, efficitur vitae venenatis sit amet, ornare et ligula. Suspendisse hendrerit nulla quam, at hendrerit justo lacinia quis. Nunc nec dui in enim suscipit egestas et ut augue.</p>
  </div>
</div>

Все это работает отдельно от появления флажка и не заменяется текстом для чтения (который имеет собственный фон).

У меня есть Прочитайте другие похожие потоки стека, включая этот: Как реализовать Читать больше / Читать меньше в чистом виде CSS, но не пытаться реализовать тот, который читал больше / меньше, чем тот. * Тот, с которым я работаю, работает отдельно от этого последнего бита. Я, должно быть, немного глуп, поскольку просто не могу понять, почему флажок не заменяется текстом.

Это должен быть кошелек CSS, а не тот, который основан на JS. Я попытался использовать метку, но она добавляется в начало текстового поля, а не вписывается в флажок.

Что, по-видимому, я делаю неправильно?