before: 伪元素选择器用于在某个元素之前插入一些内容
伪类选择器:before使用content属性插入字符、属性插入图片
css3
.p_before:before {
content: 'H';
color: #01B4EE;
}
.p_beforeImg {
background: #eeeeee;
width: 200px;
height: 80px;
border-radius: 6px;
padding: 10px 20px;
position: relative;
}
.p_beforeImg:before {
content: '';
background: url('../img/triangle_up.png') no-repeat top left /32px 16px;/*兼容没测*/
position: absolute;
top: -15px;
z-index: 2;
width: 32px;
height: 16px;
}
ello Word(H是通过before添加的文字)
通过before添加三角尖图片
运行效果
伪类选择器:before使用content属性插入项目编号，项目编号可以为数字编号、小写字母编号、大写字母编号、罗马字编号等
代码
css3
//counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1 mycounter为我指定的计数器名
.p_before_number>span,.p_before_letter>span {
counter-increment: mycounter;
display: block;
}
.p_before_number>span:before {
content: '第'counter(mycounter)'种';
}
//upper-alpha为大写字母
//其它的编号类型：list-style-type属性下面将列出它所有的值
.p_before_letter>span:before {
content: counter(mycounter,upper-alpha)'.';
}
苹果
香蕉
芒果
跑步
游泳
爬山
运行效果
第1种苹果
第2种香蕉
第3种芒果
A.跑步
B.游泳
C.爬山
list-style-type属性
值 描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是：A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
以上list-style-type属性来源w3school
after: 伪元素选择器用于在某个元素之后插入一些内容
把before的地方换成after，插入图片样式用一下的就行
.p_after:after {
content: 'd';
color: #01B4EE;
}
.p_afterImg {
background: #eeeeee;
width: 200px;
height: 80px;
border-radius: 6px;
padding: 10px 20px;
position: relative;
}
.p_afterImg:after {
content: '';
background: url('../img/triangle_down.png') no-repeat bottom right /32px 16px;/*兼容没测*/
position: absolute;
bottom: -15px;
z-index: 2;
width: 32px;
height: 16px;
}
运行效果
