CSS3 Pushing the Limits - Getting Creative with Pseudo-elements

Posted on   |   In

很多炫酷的设计都用了这个 各种after before

##Pseudo-class
用非class来定位某个元素或者状态

ul li:nth-child(4){}
a:hover{}

##Pseudo-element
某元素的一部分

p:first-line{]
div:after{}

语法：class 用 单冒号， element用双冒号

/* The spec’s syntax for a pseudo-class */
p:first-child
/* The spec’s syntax for a pseudo-element */
div::after

比较简单的：
::first-line
:::first-letter

::before 是在container所在标签里面的所有子元素之前（不存在的第一子元素）
::after 是在container所在标签里面的所有子元素之后 （不存在的最后一个子元素）

.container:before {
content: “““;
font-size: 13em;
position: absolute;
left: -100px;
color: #666;
}
.container:after {
content: “““;
font-size: 13em;
position: absolute;
right: -100px;
top: 150px;
color: #666;
}

content属性可以是特定属性值，这个方便改变

a:after {
content: attr(href);
}

content为空的就写 “”,这样就相当于插入了一个子div
一般after before都用position absolute来定，padding来控制空间