1.显示具体内容(跟:after 和:before配合使用)

HTML: css中content的使用

CSS  : css中content的使用 

效果如下:

css中content的使用

2.通过attr()显示标签的属性

HTML: css中content的使用

CSS: css中content的使用

效果如下: 

css中content的使用

3.显示字符集图标 更多字符可以访问https://blog.csdn.net/sinat_17775997/article/details/52384680

css中content的使用

4.图片替换文字

HTML: css中content的使用

 

CSS: css中content的使用  

(2,4结合到一起,可以写出 给一个超链接加上末尾图标的效果,如 css中content的使用

 

效果如下: 文字全部被图片替换

css中content的使用

5.计数器

counter-reset:创建或重置计数器(在父元素里创建计数器)    

counter-increment 传递一个或多个计数器的值

counter:使用计数器 在content里使用该属性

HTML:css中content的使用

CSS: css中content的使用

效果如下:css中content的使用

 

6.用quotes控制引号的实际字符

HTML: css中content的使用

CSS: css中content的使用

效果如下: css中content的使用 从最外层开始匹配  也可以通过:lang伪属性对应指定不同的引号

css中content的使用 

在content中,可以设置开口引号和闭口引号

css中content的使用 (貌似用不用content 跟上面quotes的效果也一样,没啥影响)

相关文章:

  • 2021-10-03
  • 2022-01-17
  • 2022-12-23
  • 2022-02-21
  • 2022-12-23
  • 2021-08-12
  • 2022-01-27
  • 2022-12-23
猜你喜欢
  • 2021-08-28
  • 2021-09-07
  • 2021-10-15
  • 2021-08-25
  • 2021-08-16
  • 2021-11-21
  • 2022-12-23
相关资源
相似解决方案