css content属性与before及after伪元素配合使用价值发挥到最大

2019-08-2008:07:05网页制作Comments3,913 views字数 5137阅读模式

content属性需要与before及after伪元素配合使用，作用是可以定义伪元素所显示的内容，本文主要列举content的可选值及实用的案例与技巧?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

基本用法

一个简单的例子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

<p>「不会写前端」</p>
复制代码

p {
  &::before {
    content: "欢迎关注"
  }

  &::after {
    content: "微信公众号"
  }
}
复制代码

浏览器显示的是这个亚子：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

css content属性与before及after伪元素配合使用价值发挥到最大

我们看看实际上在浏览器渲染的结构：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

没错，就是这么粗暴，就跟他们的名字一样，一前一后?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

值得注意的是，在新的规范中，单冒号指伪类、双冒号指伪元素，就算你写成:after，标准的浏览器还是会渲染成::after，目的是兼容旧写法?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

可取的值

普通字符
unicode
attr函数
url函数
counter函数
css变量

逐一使用

为了使文章简洁，下面有部分content属性在外层省略父元素：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

// 原始
p {
  &::after {
    content: "";  
  }
}

// 省略后
content: "";
复制代码

1. 普通字符

content: "我是文字内容";
复制代码

2. unicode

浏览器自带的特殊字符：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

p {
  &:after {
    content: "\02691";
    color: red;
  }
}
复制代码

显示如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

html特殊字符对照表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

iconfont自定义字体图标：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

<span class="icon icon-close"></span>
复制代码

@font-face {
  font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1209853_ok7e8ntkhr.ttf?t=1560857741304') format('truetype');
}

.icon {
  font-family: "iconfont";
}

.icon-close::before {
  content: "\e617";
}
复制代码

显示如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

iconfont-阿里巴巴矢量图标库文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

3. attr函数

顾名思义，这个函数可以获取html元素中某一属性的值，如id、class、style等?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

<p data-content="我是文字内容"></p>
复制代码

content: attr(data-content);
复制代码

4. url函数

显示我的掘金头像：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

content: url("https://user-gold-cdn.xitu.io/2019/8/7/16c681a0fb3e84c4?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1");
复制代码

显示如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

缺点就是无法控制图片的大小?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

5. counter函数

counter函数的作用是插入计数器的值，配合content属性可以把计数器里的值显示出来?，介绍用法之前，得先熟悉两个属性counter-reset跟counter-increment?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

counter-reset的作用是定义一个计数器：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

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

counter-increment使计数器的值递增，可以理解成javascript中的+=：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

counter-reset: count 0;
counter-increment: count 2; // 使count自增2，当前count的值为2
counter-increment: count -2; // 使count自增-2，当前count的值为-2
复制代码

注意，这里的计数器count的值为什么不是变回了0，可以理解成样式覆盖，就如以下代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

div {
  width: 100px;
  width: 200px; // 实际渲染的宽度
}
复制代码

6. css变量

显示变量的时候，如果变量是string类型则可以直接显示，如果是int类型，则需要借用counter函数?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

// string类型
--name: "不会写前端";

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

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

// int类型
--count: 60;

p {
  &::after {
    counter-reset: color var(--count);
    content: counter(count); // 显示为"60"
  }
}

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

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

拼接

普通字符串拼接：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

content: "xxx" + "xxx";
复制代码

字符串拼接函数：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

// 不能使用 + 连接符，也可以不需要空格，这里只是为了区分
content: "我支持" attr(xx);
count: "我的掘金头像：" url("xxxxx");
content: "计数器的值为：" counter(xx);
复制代码

隐性转换：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

content: 0; // 显示为""
content: "" + 0; // 显示为"0"
content: "" + attr(name); // 显示为"attr(name)"
复制代码

实用案例

1. 当a标签内容为空时，显示其`href`属性里面的值：

<a href="https://juejin.im/user/587e1822128fe1005706db1c"></a>
复制代码

a {
  &:empty {
    &::after {
      content: "链接内容为：" attr(href);
    } 
  }
}
复制代码

显示如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

2. 面包屑跟分隔符

<ul>
  <li>首页</li>
  <li>商品</li>
  <li>详情</li>
</ul>
复制代码

ul {
  display: flex;
  font-weight: bold;

  li {
    &:not(:last-child) {
      margin-right: 5px;
        
      &::after {
        content: "\276D";
        margin-left: 5px;
      }
    }
  }
}
复制代码

显示如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

之前还这样写来着?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

<li v-for="(item, index) in list">
  <span>{{item}}</span>
  <span v-show="index < list.length - 1">、</span>
</li>
复制代码

3. 进度条

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

  &::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;
  }
}
复制代码

显示如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

加个过渡效果：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

transition: width 1s ease; // 页面首次进入没有过渡效果，因为width必须要发生变化才行
复制代码

鱼和熊掌不可兼得，如果只靠css，想在页面首次进入触发动画效果，那只有animation才能做到了?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

.progress {
  &::before {
    // 移除width跟transition属性
    animation: progress 1s ease forwards;
  }
  
  @keyframes progress {
    from {
      width: 0;
    }

    to {
      width: calc(100% * var(--percent) / 100);
    }
  }
}
复制代码

页面刷新后效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

参考文章：小tips: 如何借助content属性显示CSSvar变量值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

4. tooltip提示

<button data-tooltip="我是一段提示">按钮</button>
复制代码

[data-tooltip] {
  position: relative;
  
  &::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
  &:hover {
    &::after {
      display: block;
    }
  }
}
复制代码

效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

多方向、主题、动画实现可以移步我之前写过的一篇文章：利用css‘content实现指令式tooltip文字提示?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

5. 计算checkbox选中的个数

<form>
  <input type="checkbox" id="one">
  <label for="one">波霸奶茶</label>
  <input type="checkbox" id="two">
  <label for="two">烤奶</label>
  <input type="checkbox" id="three">
  <label for="three">咖啡</label>
  
  <!-- 输入结果 -->
  <div class="result">已选中：</div>
</form>
复制代码

form {
  counter-reset: count 0;
  
  // 当checkbox选中的时候，计数器自增1
  input[type="checkbox"] {
    &:checked {
      counter-increment: count 1;
    }
  }
  
  // 输出结果
  .result {
    &::after {
      content: counter(count);
    }
  }
}
复制代码

效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

6. 给目录加章节计数

<!-- 章节 -->
<ul class="section">
  <li>
    <h1>自我介绍</h1>

    <!-- 子章节 -->
    <ul class="subsection">
      <li>
        <h2></h2>
      </li>
      <li>
        <h2></h2>
      </li>
    </ul>
  </li>
  
  <li>
    <h1>写一段css代码</h1>
  </li>
</ul>
复制代码

// 章节
.section {
  counter-reset: section 0; // 外层计数器

  h1 {
    &::before {
      counter-increment: section 1; // 自增1
      content: "Section"counter(section) ". ";
    }
  }

  // 子章节
  .subsection {
    counter-reset: subsection 0; // 内层计数器

    h2 {
      &::before {
        counter-increment: subsection 1; // 自增1
        content: counter(section) "."counter(subsection); // 计数器是有作用域的，这里可以访问外层计数器
      }
    }
  }
}
复制代码

显示如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

7. 加载中...动画

<p>加载中</p>
复制代码

p {
  &::after {
    content: ".";
    animation: loading 2s ease infinite;

    @keyframes loading {
      33% {
        content: "..";
      }

      66% {
        content: "...";
      }
    }
  }
}
复制代码

效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

8. 无更多数据

<div class="no-more">无更多数据</div>
复制代码

.no-more {
  &::before {
    content: "——";
    margin-right: 10px;
  }


  &::after {
    content: "——";
    margin-left: 10px;
  }
}
复制代码

效果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

总结

content始终都需要配合before跟after伪元素使用，主要是显示一些额外的信息，更多案例需要大家去挖掘，只要脑洞大。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

作者：聪明的汤姆
来源：掘金文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15678.html

css content属性与before及after伪元素配合使用价值发挥到最大

基本用法

可取的值

逐一使用

1. 普通字符

2. unicode

3. attr函数

4. url函数

5. counter函数

6. css变量

拼接

实用案例

1. 当a标签内容为空时，显示其`href`属性里面的值：

2. 面包屑跟分隔符

3. 进度条

4. tooltip提示

5. 计算checkbox选中的个数

6. 给目录加章节计数

7. 加载中...动画

8. 无更多数据

总结

3 种方式实现 CSS 弧形卡片

CSS新手菜鸟入门指南教程

GPT-4V新玩法：随手一画就能生成网页！

CSS负边距小范围使用两列布局

CSS使用justify实现 text-align文本两端对齐

CSS无需图片，实现圆角边框渐变色+背景透明效果

CSS 两行文字两端对齐与字符间距的处理技法

CSS Reset是什么？主流有哪几款？

CSS 新功能：锚点定位、Shapes、滚动捕捉(scroll snap)

CSS颜色混合函数color-mix深入了解

Comment

基本用法

可取的值

逐一使用

1. 普通字符

2. unicode

3. attr函数

4. url函数

5. counter函数

6. css变量

拼接

实用案例

1. 当a标签内容为空时，显示其href属性里面的值：

2. 面包屑跟分隔符

3. 进度条

4. tooltip提示

5. 计算checkbox选中的个数

6. 给目录加章节计数

7. 加载中...动画

8. 无更多数据

总结

Comment

1. 当a标签内容为空时，显示其`href`属性里面的值：