伪元素before和after的content常见用法

[xianzou]

伪元素before和after的content常见用法

本文转载自掘金用户【聪明的汤姆】的【如何把css'content的操作跟价值发挥到最大💢】，经过尝试后截取常见实用的用法，喜欢的话可以点击链接去关注他，有很多css相关的技巧；

基本用法

<h3>弦奏</h3>

h3::before {
    content: "欢迎"
}

h3::after {
    content: "进入聊天室"
}

浏览器显示：

进度条

<div class="progress" style="--percent: 14;"></div>
<div class="progress" style="--percent: 41;"></div>
<div class="progress" style="--percent: 94;"></div>

.progress {
    width: 400px;
    height: 17px;
    margin: 5px;
    color: #fff;
    background-color: #f1f1f1;
    font-size: 12px;
    animation: progress 1s ease forwards;
}
.progress::before {
    counter-reset: percent var(--percent);
    /*文字显示*/
    content: counter(percent) "%"; 

    display: inline-block;
    /*宽度计算*/
    width: calc(100% * var(--percent) / 100); 
    max-width: 100%;
    height: inherit;
    text-align: right;
    background-color: #2486ff;
}
@keyframes progress {
    from {
        width: 0;
    }

    to {
        width: calc(400px * var(--percent) / 100);
    }
}

示例：

重点：

counter函数

​ counter`函数的作用是插入计数器的值，配合`content`属性可以把计数器里的值显示出来🎲，介绍用法之前，得先熟悉两个属性`counter-reset`跟`counter-increment;

counter-reset的作用是定义一个计数器：

counter-reset: count1 0; /* 声明一个计数器count1，并从0开始计算 */
counter-reset: count2 1; /* 声明一个计数器count2，并从1开始计算 */
counter-reset: count3 0 count4 0 count5 0; /* 声明多个计数器 */

​ counter-increment使计数器的值递增，可以理解成javascript中的+=：

counter-reset: count 0;
counter-increment: count 2; /* 使count自增2，当前count的值为2 */
counter-increment: count -2; /* 使count自增-2，当前count的值为-2 */

css变量

​ 显示变量的时候，如果变量是string类型则可以直接显示，如果是int类型，则需要借用counter函数😒

/* string类型 */
:root {
    --name: "不会写前端";
}
p {
  &::after {
    content: var(--name); /* 显示为"不会写前端" */
  }
}

---------- 我是分割线 ----------

/*  int类型 */
:root {
   --count: 60;
}
p {
  &::after {
    counter-reset: color var(--count); /* 声明一个计数器color，并从60开始计算 */
    content: counter(color); /* 显示为"60" */
  }
}
---------- 我是分割线 ----------

/* 不支持的类型及情况*/
--count: 60.5; /* 显示为"0"，不支持小数 */
--count: 60px; /* 显示为""，不支持css属性值 */

tooltip提示

<button data-tooltip="我是一段提示" class="btn">按钮</button>

[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    /*文字内容*/
    content: attr(data-tooltip); 
    /*默认隐藏*/
    display: none; 
    position: absolute;

    /*漂浮在按钮上方并居中*/
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);

    padding: 5px;
    border-radius: 4px;
    color: #fff;
    background-color: #313131;
    white-space: nowrap;
    z-index: 1;
}

/*鼠标移入button的时候显示tooltip*/
[data-tooltip]:hover::after {
    display: block;
}

示例：

加载中...动画

<p>加载中</p>

p::after {
    content: ".";
    animation: loading 1s ease infinite;
}
@keyframes loading {
    33% {
        content: "..";
    }

    66% {
        content: "...";
    }
}

示例：

[xianzou]

如果想实现进度条宽度100%，可以如下写法：

.progress { 
    width: 100%; 
    height: 17px;
    margin: 5px;
    color: #fff;
    background-color: #f1f1f1;
    font-size: 12px;
}
.progress::before {
    counter-reset: percent var(--percent);
    /*文字显示*/
    content: counter(percent) "%"; 
    display: inline-block;
    /*宽度计算*/
    width: calc(100% * var(--percent) / 100); 
    max-width: 100%;
    height: inherit;
    text-align: right;
    background-color: #2486ff;
    animation: progress 1s ease forwards;
}
@keyframes progress {
    from {
        width: 0;
    }
    to {
        width: calc(100% * var(--percent) / 100);
    }
}