Html 如何使用 CSS ：target Select 器创建可重用的模式框

.modalBox {
  display: block;
  position: relative;
  width: min(98%, 800px);
  padding: 5px;
  overflow: hidden;
}

.modalBox summary {
  font-style: italic;
  cursor: pointer;
}

.modalBox p {
  transform: translateY(30vh);
  transition: transform 0.3s linear;
}

.modalBox[open] p {
  transform: translateY(0);
}

<div class="proverbs">
  <details class="modalBox">
    <summary> A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</summary>
    <p data-lang="ipa"><b>IPA:</b> a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</p>
    <p data-lang="it"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
    <p data-lang="en"><b>English:</b> The hasty cat makes blind kittens.</p>
  </details>
  
  <details class="modalBox">
    <summary> A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</summary>
    <p data-lang="ipa"><b>IPA:</b> a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</p>
    <p data-lang="it"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
    <p data-lang="en"><b>English:</b> The hasty cat makes blind kittens.</p>
  </details>
  
  <details class="modalBox">
    <summary> A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</summary>
    <p data-lang="ipa"><b>IPA:</b> a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</p>
    <p data-lang="it"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
    <p data-lang="en"><b>English:</b> The hasty cat makes blind kittens.</p>
  </details>
</div>