1. .box:before{content:"生成内容";}在.box内部的内容之前加上生成内容
2. .box:after{content:"生成内容";
color:red; font-weight:bold;}----只对生成的内容进行操作
3， css设计陷阱：子元素的margin越界问题
以前的解决方法：
1 用父元素的padding代替子元素的margin
2 给父元素设置边框
3 在父元素中设置 overflow：hidden；
问题根本：是第一个元素才会出现此问题，第二个元素不会越界
现在用内容生成解决：
父元素：before{content:""; display:table;}
没有内容则高度为0，也不允许其他元素占用一行，这样，原本的第一个元素就会变成第二个
子元素的浮动对父元素及后续元素的影响
以往解决：后面元素加clear:both;
现在：.parent:after{content:‘‘;display:table; clear:both;}
巧用css内容生成
原文地址：https://www.cnblogs.com/bydzhangxiaowei/p/9042633.html