dt dd with line breaks between

Question

<dl>
  <dt>hello</dt>
  <dd>bonjour</dd><br>

  <dt>goodbye</dt>
  <dd>aurevoir</dd><br>
</dl>

So I have a dl and I want each dt -> dd pair to show on one row so it is a line break between them. I feel like this css should solve it but it does not.

dd:after {
  content:"\a";
  white-space: pre;
}

I have tried putting each dt,dd pair in a p-element or with a br-element after whitch looks like I want but makes the HTML not validate.

like this: https://stackoverflow.com/a/60868591/8620333 ? – Temani Afif Aug 01 '20 at 08:31 — Temani Afif, Aug 01 '20 at 08:31

score 2 · Answer 1 · answered Aug 01 '20 at 08:37

2

dd,dt {
  display: inline;
}
dd::after {
 content: "";
 display: block;
}

Solved it for me ty for comment.

answered Aug 01 '20 at 08:37

Il De Santa

65
7

Wow man, this is pure poetry! You are a genius, man. This answer need to receive more attention from the community! – neoswf May 06 '22 at 22:40

dt dd with line breaks between

1 Answers1