Read More in PURE CSS

Trying to implement a CSS read more code using ONLY CSS with NO JavaScript involved. Here is the 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>

It all works apart from the checkbox appearing and not being replaced by read more text (which has its own background).

I have read other similar stack threads including this one: How to implement Read more / Read less in pure CSS but not looking to implement one that has read more/read less as that has.

The one I am working with works apart from that last bit. I must be a bit stupid as I just cannot seem to figure out why the checkbox is not replaced with the text.

It needs to be a purse CSS solution and not one based on JS. I have tried using a label but it gets appended to the beginning of the text box and not inline with the checkbox.

What do I seem to be doing wrong?