刀刀的知识积累

content内容生成技术

更新时间: 2024-03-25 08:42:41

# content辅助元素生成

此应用的核心点不在于content生成的内容，而是伪元素本身。通常，我们会把content的属性值设置为空字符串，像这样：

.element:before {
    content: ''
}
1
2
3

然后利用其他css代码来生成辅助元素，或实现图形效果，或实现特定布局，这样做的好处是HTML代码会显得更干净。

最常见的应用就是清除浮动带来的影响：

.clear:after {
    content: '';
    display: block;
    clear: both;
}
1
2
3
4
5

另一个很具有代表性的应用就是辅助实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”效果。

此实例演示是一个自动等宽布局且底部对齐的柱状图，默认展示4项，当我们动态插入更多柱子元素，布局依然只能均分剩余空间。

核心css代码如下：





 

















.box {
    width: 256px;
    height: 256px;
    border-bottom: 1px dashed #ccc;
    text-align: justify; /* 两端对齐是关键 */
}
.box:before {
    content:"";
    display: inline-block;
    height:100%;
}
.box:after {
    content:"";
    display: inline-block;
    width: 100%;
}
.bar {
    display: inline-block;
    width: 20px;
    height: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

至于实现原理，:before伪元素用于辅助实现底对齐，：after伪元素用于辅助实现两端对齐。

# content字符内容生成

content字符内容生成就是直接写入字符内容，中英文都可以，比较常见的应用就是配合@font-face规则实现图标字体效果。

例如下面的例子，此时页面显示的就不是家字，而是一个图标。

@font-face {
    font-family: "myico";
    src: url("/fonts/4/myico.eto");
    src: url("/fonts/4/myico.eto#iefix") format("embedded-opentype"),
        url("/fonts/4/myico.ttf") format("tryetype"),
        url("/fonts/4/myico.woff") format("woff");
}
.icon-home:before {
    font-size: 64px;
    font-family:  myico;
    content:"家"；
}
1
2
3
4
5
6
7
8
9
10
11
12
<span class="icon-home"></span>
1
  • 除了常规字符之外，还可以插入Unicode衣服，比较经典的就是插入换行符来实现某些布局效果。
:after {
    content: '\A';
    white-space: pre;
}
1
2
3
4

# content图片生成

content图片生成指的是直接用url功能符显示图片，

div:before {
    content: url(1.jpg);
}
1
2
3

# 了解content开启闭合符号生成

content支持的属性值中有一对不常用的open-quote和close-quote关键字，意思就是开启的引号和闭合的引号，配合css中的quotes属性，可以定义open-quote和close-quote字符具体是什么。不详细了解了，这个功能比较鸡肋有替代性。

# content attr属性值内容生成

例如:

<div data-title="我是title" class="content-title"></div>
1
.content-title {
    width:100px;
    height: 100px;
    border: 1px solid red;
}
.content-title:before{
    content: attr(data-title)
}
1
2
3
4
5
6
7
8

注意

attr功能符中的属性名称千万不要加个引号。

# 深入理解content计数器

# 属性counter-reset

顾名思义，就是“计数器-重置”的意思。主要作用就是给计数器起个名字。如果可能，顺便告诉下哪个数字开始计数。默认是0。

我教王小二，字如其名，下面要出现的数字是：

<div class="border">
    <p>我教王小二，字如其名，下面要出现的数字是：</p>
    <p class="counter"></p>
</div>
1
2
3
4
.counter {
    /* 计数器的名称是‘wangxiaoer1’,并且默认起始值是2 */
    counter-reset: wangxiaoer 2;
    font-size: 32px;
    color: #cd0000;
}
.counter:before {
    content: counter(wangxiaoer)
}
1
2
3
4
5
6
7
8
9

counter-reset的计数器重置可以是负数，如-2，也可以写成小数，如2.99，不过小数有的浏览器不兼容，最好还是写整数。

counter-reset还可以多个计数器同时命名：

我叫王小二，万万没想到，会出现另一个数字：

<div class="border">
    <p>我叫王小二，万万没想到，会出现另一个数字：</p>
    <p class="counter"></p>
</div>
1
2
3
4
.counter {
    counter-reset: wangxiaoer 2 wangxiaosan 3;
    font-size: 32px;
    color: #cd0000;
}
.counter:before {
    content: counter(wangxiaoer);
}
.counter:after {
    content: counter(wangxiaosan);
}
1
2
3
4
5
6
7
8
9
10
11

# 属性counter-increment

顾名思义，就是“计数器递增”的意思。
css的计数器是有一套规则的，称为“普照规则”。具体来讲就是：普照源（counter-reset）唯一，每普照（counter-increment）一次，普照源增加一次计数。

我本名王小二，万万没想到，我现在居然成了王小...

<div class="border">
    <p>我本名王小二，万万没想到，我现在居然成了王小...</p>
    <p class="counter"></p>
</div>
1
2
3
4
.counter {
    counter-reset: wangxiaoer 2;
    counter-increment: wangxiaoer;
    font-size: 32px;
    color: #cd0000;
}
.counter:before {
    content: counter(wangxiaoer);
}
1
2
3
4
5
6
7
8
9

这里counter-increment普照了p标签，所以计数从设置的初始值2变成了3。

如果父元素和子元素都被counter-increment普照1次呢?答案是4

我叫王小二，万万没想到，我现在居然成了王小...

<div class="border">
    <p>我叫王小二，万万没想到，我现在居然成了王小...</p>
    <p class="counter"></p>
</div>
1
2
3
4
.counter {
    counter-reset: wangxiaoer 2;
    counter-increment: wangxiaoer;
    font-size: 32px;
    color: #cd0000;
}
.counter:before {
    content: counter(wangxiaoer);
    counter-increment: wangxiaoer;
}
1
2
3
4
5
6
7
8
9
10

总而言之，无论位置在何处，只要有counter-increment，对应的计数器的值就会变化，counter()只是输出而已。

我叫王小二，万万没想到，兄弟情深，计数递增！

<div class="border">
    <p>我叫王小二，万万没想到，兄弟情深，计数递增！</p>
    <p class="counter"></p>
</div>
1
2
3
4
.counter {
    counter-reset: wangxiaoer 2;
    font-size: 32px;
    color: #cd0000;
}
.counter:before, .counter:after{
    content: counter(wangxiaoer);
    counter-increment: wangxiaoer;
}
1
2
3
4
5
6
7
8
9

计数器的数值变化遵循HTML渲染顺序，遇到一个increment计数器就变化，什么时候counter输出就输出此时的计数值。

counter-increment还有其他设定

  • counter-reset可以一次性命名两个计数器名称，counter-increment自然有与之呼应的设定。
.counter {
    counter-reset: wangxiaoer 2 wangxiaosan 3;
    counter-increment: wangxiaoer wangxiaosan;
}
1
2
3
4
  • 变化的值不一定是1，可以灵活设置，可以是2，3负数也可以。
  • 还可以是none或者inherit

# 方法counter()/counters()

这是方法，不是属性。作用很单纯，即显示计数，不过名称，用法有多个。

/* name就是counter-reset的名称 */
counter(name)
1
2
counter(name, style)
1

这里的style参数还是有些名堂的。它支持的关键字值就是list-style-type支持的那些值。它的作用是：我们递增递减的可以不一定是数字，还可以是英文字母或者罗马文等。
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

我叫王小二，万万没想到，我变成了罗马人！

这个就是设置了，content: counter(wangxiaoer7, lower-roman);

counters(name, string)
1

string参数是字符串（需要引号包围的，是必须参数），表示子序号的连接字符串。例如，1.1的string就是'.'，1-1就是'-'

我是王小二
我是王小二的大儿子
我是王小二的二儿子
我是王小二的二儿子的大孙子
我是王小二的二儿子的二孙子
我是王小二的二儿子的小孙子
我是王小二的三儿子
我是王小三
我是王小四
我是王小四的大儿子
<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.reset { 
  padding-left: 20px; 
  counter-reset: wangxiaoer;
}
.counter:before { 
  content: counters(wangxiaoer, '-') '. '; 
  counter-increment: wangxiaoer;
}
1
2
3
4
5
6
7
8

# content内容生成的混合特性

各种content内容生成语法是可以混合在一起的。

a:after {
    content: "(" attr(href) ")";
}
q:before {
    content: open-quote url(1.jpg);
}
.counter:before {
    content: counters(wangxiaoer, '-') '.';
}
1
2
3
4
5
6
7
8
9

←

MIT Licensed | Copyright © 2021-present 刀刀