To achieve the above effect:<dl> <dt> Ask:</dt><dd> Why don't you have a boyfriend? </dd></dl><dl> <dt> Answer:</dt><dd> Boyfriend is what, can eat? The </dd></dl> principle is obvious: wrap the header element before the line break in front of the first tag element. Dt:before {content: ' \d\a '; White-space:pre;} Dt:first-child:before {content:normal;} "\a" is where the magic value lies. The include carriage return CR and newline LF characters are generally Unicode characters, which can be inserted as easily as other Unicode characters. They have 000D and 000A Unicode encoding respectively. This means that if we escape the content properly, it can be inserted as normal content! The above "Cr and LF characters" refer to carriage return (CR) and line break (LF), respectively. Carriage return cr-moves the cursor to the beginning of the current line (?), and the newline lf-moves the cursor "vertically" to the next line (not to the beginning of the next line, which does not change the horizontal position of the cursor). http://www.zhangxinxu.com/wordpress/2012/03/tip-css-multiline-display/
Use (Unicode characters) to wrap inline horizontal elements