Masquer un lien lors d'un clic css only

Question

Je suis assez novice en matière de codage (j'ai commencé il y a quelques semaines avec html et css). Pour une page de news, j'ai essayé de mettre en place des liens "lire sur", un peu comme dans cette question ici : on click hide this (button link) pure css

Cependant, je n'arrive pas à faire disparaître le lien après avoir cliqué dessus. J'ai obtenu ceci pour mon code jusqu'à présent (l'ouverture et la fermeture fonctionnent parfaitement) :

.readmore {
  display: none;
}

article[id*="n"]:target .readmore {
  display: block;
}

article:target .used {
  display: none;
}

<article>Text visible after you open the site.

  <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>

  <article id="n2">
    <div class="readmore">more text
     <a href="#back">Closing button</a>
    </div>
  </article>
</article>

J'ai l'impression d'avoir fait une grosse bêtise, mais je n'arrive pas à comprendre.

Answer 1

Il suffit de placer votre lien à l'intérieur de la balise de l'article en incluant votre identifiant.

.readmore {
  display: none;
}

article[id*="n"]:target .readmore {
  display: block;
}

article[id*="n"]:target .used {
  display: none;
}

<article>Text visible after you open the site.

  <article id="n2">
    <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>
    <div class="readmore">more text
      <a href="#back">Closing button</a>
    </div>
  </article>
</article>

Answer 2

En utilisant ceci vous pouvez réaliser ce que vous voulez.....vous avez ajouté un article interne id que vous devez donner à l'article parent et changer la css.

.readmore {
  display: none;
}

#n2:target .readmore {
  display: block;
}

#n2:target .used {
  display: none;
}

.readmore {
  display: none;
}

#n2:target .readmore {
  display: block;
}

#n2:target .used {
  display: none;
}

<article id="n2">Text visible after you open the site.

  <a href="#n2" class="used">Link that opens more text and should diappear after clicking</a>

  <article>
    <div class="readmore">more text
     <a href="#back">Closing button</a>
    </div>
  </article>
</article>