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

junbaor 发布于2019-08-29 13:09 / 2544人阅读

摘要：小写罗马数字等。小写英文字母等。传统的希伯来编号方式传统的亚美尼亚编号方式传统的乔治亚编号方式等。日文片假名以上属性来源伪元素选择器用于在某个元素之后插入一些内容把的地方换成，插入图片样式用一下的就行兼容没测运行效果

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

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

css3

ello Word（H是通过before添加的文字）

通过before添加三角尖图片

运行效果

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

代码

运行效果

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

运行效果

GPU云服务器云服务器 vi插入字符插入图片一个符号插入器 ppt插入图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112400.html

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

摘要：小写罗马数字等。小写英文字母等。传统的希伯来编号方式传统的亚美尼亚编号方式传统的乔治亚编号方式等。日文片假名以上属性来源伪元素选择器用于在某个元素之后插入一些内容把的地方换成，插入图片样式用一下的就行兼容没测运行效果 before: 伪元素选择器用于在某个元素之前插入一些内容伪类选择器:before使用content属性插入字符、属性插入图片 ...

孙淑建 2019-08-02 15:57 评论0 收藏0
CSS3的content属性详解

摘要：中主要的伪元素有四个，在伪元素选择器中，有一个属性，能够实现页面中的内容插入。这是链接运行结果插入项目编号利用的属性针对多个项目追加连续编号大标题文字大标题文字大标题文字大标题文字运行结果项目编号修饰默认插入的项目编号是数字型的，。。。 CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个...

RyanHoo 2019-08-28 18:09 评论0 收藏0
css系列之before或after中content

摘要：要配合和属性使用。，给同级元素增加计数器用于标识自增计数器的作用范围，为自定义名称，为起始编号默认为。 **单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素，不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，单冒号(:)兼容性更好** content可能的值 div::after{ ...

lieeps 2019-08-30 15:55 评论0 收藏0
CSS魔法堂：一起玩透伪元素和Content属性

摘要：前言继上篇魔法堂稍稍深入伪类选择器记录完伪类后，我自然而然要向伪元素伸出魔掌的啦。和的注意事项默认必须设置属性，否则一切都是无用功默认，就是和的内容无法被用户选中的伪元素和伪类结合使用形如。前言继上篇《CSS魔法堂：稍稍深入伪类选择器》记录完伪类后，我自然而然要向伪元素伸出魔掌的啦^_^。本文讲讲述伪元素以及功能强大的Contet属性，让我们可以通过伪元素更好地实现更多的可能！ ...

DevTalking 2019-08-30 15:54 评论0 收藏0