通过CSS来插入换行的需求通常与定义列表有关，但有时也涉及其他场景。在这里就用定义列表来举例：
看看怎么用换行来一步步实现这个效果吧。
<div>结构：
<dl>
<dt>Name</dt>
<dd>Spike</dd>
<dt>Email</dt>
<dd>774055236@163.com</dd>
<dt>Location</dt>
<dd>Earth</dd>
</dl>
没有添加样式之前原本的样子
先给<dd>添加样式：
dd {
margin:0;
font-weight:bold;
}
字体加粗，取消边距。
由于
<dt>、<dd>都是块级元素，我们往往得到上图这样的结果，这时我们会想，给它们加上 display属性：
dt,dd {
display:inline;
}
此时糟糕的情况出现了：
解决方案：
我们需要在
<dd>后面添加一个换行。此时在这里是个糟糕的方案，这种方法不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码。最好用生成性内容来添加换行，取代
。
实际上，有一个Unicode字符是专门代表换行符的：0x000A。CSS中可简写为：“\A”。可以用它来作为
::after伪元素的内容。
dd:after {
content:'\A';
}
但实际上添加了这行代码之后，跟上图相比并没有任何变化，我们还忽略了什么？这段代码所做的其实只相当于在HTML结构中的所有关闭标签</dd>之前添加换行符。默认情况下，这些换行符会与相邻的其他空白符进行合并。不过有时候，我们希望保留源代码中的这些空白符和换行。在这种场景下怎么做呢？
对伪元素生成的换行符设置：white-space: pre;
dt,dd {
display:inline;
}
dd {
margin:0;
font-weight:bold;
}
dd:after {
content:'\A';
white-space:pre;
}
到这里觉得问题似乎解决了，但其实斌没有，只要再加一个
dd 问题就显现了:
这时我们换一下思路，在dt前面插入换行：
dt:before {
content:'\A';
white-space:pre;
}
但是这并不是一个完美的方案，因为你会发现第一行会出现空行：
为了避免这个问题，可以尝试使用一下这些选择符来代替单纯的
dt
- dt:not(:first-child)
- dt ~ dt
- dd + dt
最后一种是比较适合我们这种情况的。
同时 我们还希望“在每个前面有 dd 的 dd 头部插入逗号”：
dd + dt:before {
content:'\A';
white-space:pre;
}
dd + dd:before {
content:',';
margin-left:-.25em; /*修复逗号前的空格*/
font-weight:normal;
}
最终效果
参考书籍：Lea Verou《CSS揭秘》
