content属性需要和前后伪元素一起使用。它的作用是定义伪元素显示的内容。本文主要罗列可选值内容和实战案例及技巧？一个基本用法的简单例子：
不会写前端
p{&::before{content:"欢迎关注"}&::after{content:"微信公众号"}}浏览器显示这个sub:让我们看看在浏览器中实际呈现的结构：是的，它是如此粗糙，就像它们的名字一样，一个接一个？值得注意的是，在新的规范中，一个单冒号指的是伪类，双冒号指的是伪元素，即使写了:after，标准浏览器还是会渲染成::after，目的是为了兼容旧的方式writing?理想值是普通字符unicodeattr函数url函数counter函数css变量一一使用为了文章简洁，下面部分内容属性省略了外层的父元素：//原文p{&::after{content:"";}}//省略后content:"";1.普通字符内容:"我是文本内容";2.unicode浏览器自带的特殊字符:p{&:after{content:"\02691";color:red;}}显示如下：html特殊字符对照表iconfont来自Definefonticon:
@font-face{font-family：“图标字体”；src:url('//at.alicdn.com/t/font_1209853_ok7e8ntkhr.ttf?t=1560857741304')格式('truetype');}.icon{font-family:"iconfont";}.icon-close::before{content:"\e617";}显示如下：iconfont-阿里巴巴矢量图标库3.attr函数顾名思义，这个函数可以获取html元素中某个属性的值，比如id，阶级、风格等？content:attr(data-content);4.url函数显示我的掘金头像：content:url("https://user-gold-cdn.xitu.io/2019/8/7/16c681a0fb3e84c4?imageView2/1/w/180/h/180/q/85/格式/webp/交错/1");显示如下：缺点是无法控制图片大小？5.计数器函数计数器函数的作用是插入计数器的值。有了content属性，是否可以显示计数器中的值？在介绍用法之前，你必须熟悉counter-reset和counter-increment这两个属性?counter-reset的作用是定义一个计数器：counter-reset:count10;//声明一个计数器count1，从0开始计数counter-reset:count21;//声明一个计数器count2，并从1计数计数器-reset:count30count40count50;//声明多个计数器counter-increment，增加计数器的值，在javascript中可以理解为+=：counter-reset:count0;counter-increment:count2;//计数加2，计数当前值为2counter-increment:count-2;//将count递增-2，count当前值为-2注意，这里的counter的值为什么没有变回0，可以理解为样式覆盖，就像下面的代码：div{宽度：100px；宽度：200px；//实际渲染宽度}6.css变量显示变量时，如果变量是string类型，可以直接显示，如果是int类型，需要借用counter函数吗？//stringtype--name:"can'twritefrontend";p{&::after{content:var(--name);//显示为“不能写前端”}}------------我是分界线------------//inttype--count:60;p{&::after{counter-reset:colorvar(--count);内容：计数器（计数）；//显示为“60”}}------------我是分界线------------//不支持的类型和情况--count:60.5;//显示为“0”，不支持小数--count:60px;//显示为“”，不支持css属性值的拼接常用字符串拼接：内容：“xxx”+“xxx”；字符串拼接函数：//不能使用+连接符，或者不需要空格，这里只是为了区分content:"Isupport"attr(xx);count:"Mynuggetavatar:"url("xxxxx");content:"计数器的值："counter(xx);隐式转换：内容：0；//显示为""content:""+0;//显示为“0”content:""+attr(name);//显示为"attr(name)"实际案例1.当a标签内容为空时，显示其href属性中的值：a{&:empty{&::after{content:"链接的内容是："attr(href);}}}显示如下：2.面包屑和分隔符ul{display:flex;字体粗细：粗体；li{&:not(:last-child){margin-right:5px;&::after{内容：“\276D”；左边距：5px；}}}}显示如下：之前还这样写吗？{{item}},3。进度条</div> 