:after,:before,content

Posted 2020-08-19 DJL箫氏

:after  和  :before其实已经比较熟了，但是一直只是会用，今天来做个总结。

首先说说:after 和 ::after，这两个其实区别不大，个人感觉，只是官方为了区别伪类和伪元素。有一个冒号的一般代表伪类如:hover。两个的代表伪元素。所有浏览器都支持一个冒号或者两个冒号，也就是说:after和::after在绝大多数情况下能够互换。只不过:after是CSS2里面的，::after是CSS3里面的，所以如果你想在ie8里面使用after的话，就只能写一个冒号了。

那么有什么作用呢，一般就是用来在元素的最前面或者最后面来添加一些小东西，比如icon。但是利用伪元素添加的内容是不属于DOM的，所以一些读屏软件是读不到的，另外也是不支持事件绑定的。

after，before和content是好基友，content只能作用于伪元素，不能作用于一般的DOM元素。content添加的内容默认是inline，当然content的内容样式多种多样，引用一句话

The content inserted using the content property can be string(s) of text, glyphs, images, counters (for styling lists), or quotes

content: normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit 

添加了content内容 后，就可以像操作普通DOM元素一样给它添加样式了。

可以看到content的内容中可以用来插入图片，利用这个特点我们我们可以制作多层背景啊！

代码示例在此：http://runjs.cn/detail/pmqa0y8a

还可以干嘛呢！计数器啊

    <div class="counter">
        <div>d</div>
        <div>j</div>
        <div>l</div>
    </div>

           .counter{
                counter-reset: counterTest;
            }
            
            .counter div{
                counter-increment: counterTest 1;
            }
            
            .counter div:before{
                content: counter(counterTest);
            }

上面是简单的用法

这里有一些示例：http://tympanus.net/codrops/2013/05/02/automatic-figure-numbering-with-css-counters/

还能做什么呢！

然后就是运用到打印上面。显示打印链接：

@media print {
    a[href]::after {
        content: attr(href);
    }
}

 

参考文档：

http://tympanus.net/codrops/css_reference/content/