JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  FĂ©licitations ! Vous venez de gagner 3 nouveaux objets
  <input type=checkbox id="see-more-1" class="seemore" />
  <label for="see-more-1" class="seemore"></label>
  <span class="hide">une paire de bottes, un ballon et une poire</span>.
  Continuez ainsi !
</p>


<p>
  Un ami vient de vous envoyer 2 cadeaux
  <input type=checkbox id="see-more-2" class="seemore" />
  <label for="see-more-2" class="seemore"></label>
  <span class="hide">un peigne et une perruque</span>.
  Remerciez-le.
</p>

CSS

span.hide { display: none; }

label.seemore::before { content: "(+)"; }
label.seemore:hover { cursor: pointer; }

input[type='checkbox'].seemore {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

input.seemore:checked~span.hide { display: inline; }
input.seemore:checked~span.hide::after { content: ")"; }

input.seemore:checked~label.seemore::before { content: "(- : "; }