.read-more {
&-state {
display: none;
&:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}
&:checked ~ .read-more-trigger:before {
content: 'Show less';
}
}
&-state ~ .read-more-trigger:before {
content: 'Show more';
}
&-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .1s ease;
}
&-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
}
}
<!--Toggle in HTML-->
<input type="checkbox" class="read-more-state" id="post-1" />
<p class="read-more-wrap">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore
<span class="read-more-target"> eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem! Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!Libero fuga facilis
</span>
</p>
<label for="post-1" class="read-more-trigger"></label>