当前位置：首页 > Web开发 > 正文

CSS伪类选择器:before、:after使用：插入字符、插入图片、插入项目编号

2024-03-31 Web开发

before: 伪元素选择器用于在某个元素之前插入一些内容

伪类选择器:before使用content属性插入字符、属性插入图片

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui"> <meta content="black-translucent"> <meta content="yes" /> <meta content="telephone=no"> <meta content="black"> <meta content="yes"> <meta content="webkit"> <title>css3</title> <style type="text/css"> .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; } </style> </head> <body> <p>ello Word（H是通过before添加的文字）</p> <p>通过before添加三角尖图片</p> </body> </html>

运行效果

技术图片

伪类选择器:before使用content属性插入项目编号，，项目编号可以为数字编号、小写字母编号、大写字母编号、罗马字编号等

代码

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui"> <meta content="black-translucent"> <meta content="yes" /> <meta content="telephone=no"> <meta content="black"> <meta content="yes"> <meta content="webkit"> <title>css3</title> <style type="text/css"> //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)‘.‘; } </style> </head> <body> <div> <span>苹果</span> <span>香蕉</span> <span>芒果</span> </div> <div> <span>跑步</span> <span>游泳</span> <span>登山</span> </div> </body> </html>

运行效果

第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; }

运行效果

技术图片

CSS伪类选择器:before、:after使用：插入字符、插入图片、插入项目编号

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31348.html

CSS伪类选择器:before、:after使用：插入字符、插入图片、插入项目编号

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢