”よくある質問項目”を作る方法

html/css 

<dl class="faq">
  <dt class="faq__dt">質問が入ります</dt>
  <dd class="faq__dd">回答文が入ります</dd>
</dl>
.faq {
  margin-bottom: 32px; /* 各Q&Aの下に余白 */
}

.faq__dt, .faq__dd {
  position: relative;
  padding-left: 24px;
}

.faq__dt::before, .faq__dd::before {
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.faq__dt {
  font-weight: bold;
  border-bottom: 1px solid #999;
  margin-bottom: 4px;
}

.faq__dt::before {
  content: 'Q.';
}

.faq__dd::before {
  content: 'A.';
}