line-break

by Xiaoke Mao

HTML

<dl>
  <dt>Name:</dt>
  <dd>xiaoke Mao</dd>
  <dt>Email:</dt>
  <dd>[email protected]</dd>
  <dd>[email protected]</dd>
  <dt>Location:</dt>
  <dd>NanKing</dd>
</dl>

CSS

@import url('https://fonts.googleapis.com/css?family=Cabin:400,700');
dt,
dd {
  display: inline;
  margin: 0;
}

dd {
  font-weight: 600;
}

dd + dt::before {
  content: "\A";
  white-space: pre;
}

dd + dd::before {
  content: ', ';
  font-weight: normal;
  margin-left: -.25em;
}

body {
  font: 'Cabin', sans-serif;
}