before在div里面，h1的外面（前面）。你给div和h1都加上边框border就可以理解了。它是div的子元素，h1的兄弟元素。

设置.str的阴影的时候，符号没有放对位置。

在w3c上面，不是说那个标准语义一般写在后面，为啥刚刚那个上面的box-shadow在-moz-boxshadow,-o-box-shadow……的前面啊？

因为盒子里面的h1元素的高度等于盒子的高度，h1是块级元素要独占一行（行高等于盒子高度），所以插在后面的内容被挤到盒子外面了。若是盒子里面的内容没有撑满整个盒子的高度，那么插在前面和后面的内容自然都在盒子里面。

没有写错，就是这样。你可以实际测试一下。after和before伪元素并非是指在元素后或前插入内容，注意是元素的内容后面。比如<p>aa</p>使用了 p:after{content:'bb'}得到的效果是aabb，但它并非是你想想象的源码<p>aa</p>bb(,而是<p>aabb</p>。其实这个效果你只要是看aa与bb是否在同一行就一目了然。

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

对于CSS2之前已有的伪元素，比如:before和:after，单冒号和双冒号的写法::before和::after作用是一样的。

如果只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。