写给自己看的CSS“content”的应用场景

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

前言

最近学习css的时候，真的有好多地方都用到了content。例如《这一篇你不知道的美化列表的两种方案！》用到了content来美化列表，还有这一篇《还不会动态渐变文字，试试这几种解决方案！》用到了content+attr来实现动态渐变文字。还有其他文章中，也用到了content.所以我决定整理一下，关于content，我的应用。

在MDN上列举了content可以设置的各种内容。例如颜色，图片，表情符号，unicode等。有兴趣的可以自己研究：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/content

::maker + content

::maker是用来修改list item中的maker box，它作用在任何设置了display: list-item的元素或伪元素上。它支持设置content。

li:nth-child(2)::marker {
content: "🍔🍟🍗";
}

::before/::after +content

在CSS中这个组合应该是最常见的。利用这个组合可以实现很多好玩的CSS。

1、渐变文字的实现方案之一 content+attr()

attr()主要是用来获取元素的某一个HTML属性值，目前仅支持content。

<p data-text="我是动态渐变的文字！">我是动态渐变的文字！</p>

在这个方案中，我们的思路是利用content+attr来获取p标签的data-text属性，然后将content覆盖在p标签上，产生叠加效果。

2. :;after+content制作一些图形

在这种场景，content一般被设置为空字符串，目的是伪元素可以被渲染出来。

例如利用伪元素和div制作一个邪三角气泡，可以这样写

.bubble-box::after {
    content: "";
    position: absolute;
    border:10px solid transparent;
    border-top-color: #409eff;
    border-right-color: #409eff;
    right: 100%;
    top: 10%;
    transform: skewY(10deg);
}

通过定位到div的一边

3. ::before+content 修改列表样式

 ul/ol{
  list-style-type: none;
 }
 li::before {
  content: '🤤 ';
}
 

4. 引用符号

依靠content提供的open-quote、close-quote、no-open-quote、no-close-quote，可以很方便的给文字加上引号。

 p::before {
        content: open-quote;
      }
      p::after {
        content: close-quote;
      }

当然引用符号不会这么弱，配合quotes可以定义自己的符号.

 p {
        quotes: "『" "』";
      }

计数器

这是我最喜欢用的属性了，《还在用JS计数吗？来试试纯CSS计数器！！！》一文中详细的介绍了用法。

p {
        counter-increment: myCounter 1;
      }
      p::before {
        content: counter(myCounter);
      }
         <p>content 1</p>
    <p>content 2</p>
    <p>content 3</p>