css中 li:before 与 li:after

Question

ul.box li:before {

z-index: -2;

position: absolute;

background: transparent;

width: 90%;

height: 80%;

content: '';

left: 20px;

bottom:8px;

-webkit-transform: skew(-12deg) rotate(-4deg);

-moz-transform:skew(-12deg) rotate(-4deg);

-o-transform: skew(-12deg) rotate(-4deg);

-ms-transform: skew(-12deg) rotate(-4deg);

-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);

behavior: url(ie-css3.htc);

}

ul.box li:after {

z-index: -1;

position: absolute;

background: transparent;

width: 90%;

height: 80%;

content: '';

right:20px;

bottom:8px;

-webkit-transform: skew(12deg) rotate(4deg);

-moz-transform:skew(12deg) rotate(4deg);

-o-transform: skew(12deg) rotate(4deg);

-ms-transform: skew(12deg) rotate(4deg);

-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);

behavior: url(ie-css3.htc);
请高手详解这两段代码 十分感谢

Answer 1

ul.box li:before {
:before元素的内容之前插入新内容
z-index: -2;
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
position: absolute;
生成绝对定位的元素
background: transparent;
背景为透明
width: 90%;
宽度为90%
height: 80%;
高度为80%
content: '';
来插入生成内容
left: 20px;
左边距离
bottom:8px;
下面距离
-webkit-transform: skew(-12deg) rotate(-4deg);
斜切-12度，旋转-4度。下方同理，前缀是兼容不同浏览器
-moz-transform:skew(-12deg) rotate(-4deg);
-o-transform: skew(-12deg) rotate(-4deg);
-ms-transform: skew(-12deg) rotate(-4deg);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
投影，左边投影为0，下方为8,虚化半径为20，投影颜色黑色，透明度为6%。下方同理，前缀是兼容不同浏览器
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
behavior: url(ie-css3.htc);
兼容IE浏览器
第二段代码基本一样，只不过:after元素的内容之后插入新内容

Answer 2

li:after和li:before是伪类属性，after是之后的意思，before是之前的的意思，前面简单的就不用一一件事吧，见识一下后面的css3的部分， -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);apple浏览器兼容

-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); firefox浏览器兼容

-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); opera浏览器兼容

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); //这是设置阴影

-webkit-transform: skew(12deg) rotate(4deg); //apple浏览器下旋转12度

-moz-transform:skew(12deg) rotate(4deg);

-o-transform: skew(12deg) rotate(4deg);

-ms-transform: skew(12deg) rotate(4deg);追问

请问after和before这两个伪类是什么意思，表示什么？

Answer 3

:before和 :after都是伪元素。 都可以在被选元素的内容中插入内容，使用 content 属性来指定要插入的内容。两个不同之外在于，:before是在被选元素的内容的最前插入内容，:after被选元素的内容的最后插入内容。
ul.box li:after 表示在类名为box的ul标签下的所有li标签的内容插入一个:after伪元素，然后对这个伪列表设置了一堆样式属性。
ul.box li:before同理本回答被网友采纳

Answer 4

请把你疑问的指出来，请不要说你哪都不懂

Answer 5

哪里不懂得标出来，把懂得自己剔除掉