伪元素 ::after 和 ::before 应该这么用(一)

白话前端

1 什么是伪元素?

CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现,用法和普通的元素用法是一样的。

1.1 常用的伪元素和伪类

伪元素和伪类的写法有点像,伪元素使用2个冒号,常见的有:::before::after::first-line::first-letter::selection::placeholder等;伪类使用1个冒号,常见的有::hover:link:active:target:not():focus等。

1.2 伪元素和伪类的区别

伪元素添加了一个页面中没有的元素(只是从视觉效果上添加了,不是在文档树中添加),伪类是给页面中已经存在的元素添加一个类。

1.3 CSS3中的伪元素

在实际的开发工作中,有人会把伪元素用1个冒号来写,这实际是 CSS2 与 CSS3新旧标准的规定不同而导致的。
CSS2 中的伪元素使用1个冒号,在 CSS3 中,为了区分伪类和伪元素,规定伪元素使用2个冒号。所以,对于 CSS2 标准的老伪元素,比如:first-line:first-letter:before:after,写一个冒号浏览器也能识别,但对于 CSS3 标准的新伪元素,比如::selection,就必须写2个冒号了。
如果不需要考虑IE8以下的浏览器,建议都使用2个冒号的新标准写法来写。否则还是使用1个冒号吧!

2 伪元素 ::before 和 ::after 的用法

  1. 标准写法是双冒号(但考虑兼容性也有人写单冒号)
  2. ::before::after在被选中元素里面、元素现有内容之前(后)插入内容,需要使用content属性指定要插入的内容。content必须有值(空值也行)。
  3. content插入的内容默认是 inline 元素,可以通过display:block改变。

3 伪元素的特点

3.1 优点

  1. 不占用 DOM 节点,减少 DOM 节点数。
  2. 让 CSS 帮助解决了一部分 JavaScript 问题,简化了开发。
  3. 不仅块级元素可以设置伪元素,大部分行级元素也可以。
  4. 避免增加毫无意义的页面元素。

3.2 缺点

  1. 不利于调试。
  2. 伪元素不真正在文档内容中体现,只在视觉效果上体现,所以不能给伪元素添加具有实际意义的内容,这部分内容不会搜索引擎抓取。

4 content属性

content 的值可以是空值、字符串、attr()、url()、uri()、counter()等,下面分别演示一下。

4.1 空值

可以用来清除浮动。代码如下:

    <style>
        .clearFix::after{
            clear: both;
            content: "";
            display: block;
            height: 0;
            overflow: hidden;
        }
    </style>

包含 cleafFix 这个类的元素,其内部的浮动可以被清除。

4.2 string(字符串)

在电话号码前面添加一个电话的icon图标。代码如下:

HTML部分

<p class="phoneNumber">13900001390</p>

CSS部分

        .phoneNumber::before{
            content:'\260E';
            font-size: 16px;
        }

效果展示:
图片描述

小电话的图标是一个特殊字符,每个特殊字符都有特定代码,特定代码用在HTML中以 开头,用在 CSS 中以 \ 开头,用在 JS 中以 \u 开头。
比如这个电话图标,在 HTML 中用 &#9742 表示,在 css 中以 \260E 表示,在 JavaScript 中,以 \u260E 表示。

4.3 attr( ) 以及 url( )

attr():可以调用当前元素的某个属性。
url():可以引用媒体文件(比如图片)。


演示代码:

HTML部分:

<a href="https://www.google.com">GOOGLE!</a>

CSS 部分:

        a::before{
            content: url("https://www.google.com/logos/doodles/2018/world-cup-2018-day-19-6211393811382272.3-law.gif");
        }
        a::after{
            content: "("attr(href)")";
        }
        a{
            text-decoration: none;
        }

效果预览:
图片描述

例子中,content 中的 url 是引用媒体文件,所有不用加引号。
attr 是调用元素 href 属性当做字符串显示出来,所有要加引号。至于括号里面,如果加引号,就会显示出来 href 的值,如果不加引号就打印字符串 (attr(href)),我还不太清除加载括号里面的引号是什么用法。

4.4 counter 计数器

counter 调用计数器,可以不使用列表元素实现序号功能。
counter 要配合 counter-increment 和 counter-reset属性使用。

counter-reset 给同级元素增加计数器,比如一个页面有多个H1元素,那就给body加计数器。一个H1元素里面有多个H2元素,那就给H1元素加计数器。

counter-increment 增加计数器数值。

代码演示:

HTML部分:

<body>
<h1>哺乳动物</h1>
<h2>狗</h2>
<h2>猴子</h2>
<h2>猩猩</h2>

<h1>冷血动物</h1>
<h2>鱼</h2>
<h2>蛇</h2>
</body>

CSS部分:

        body{
            counter-reset: section;
        }
        h1{
            counter-reset:subsection;
        }
        h1::before{
            counter-increment: section;
            content:counter(section)'、';
        }
        h2:before{
            counter-increment: subsection;
            content: counter(section)'.'counter(subsection)'、';
        }

效果演示:
图片描述

4.5 content的值什么时候加引号,什么时候不加

通过以上实例可以看出:

  1. 动态的(会变的值)不加引号。
  2. 媒体不加引号。
  3. 固定的值、字符串需要加引号。
阅读 15.1k

100 声望
7 粉丝
0 条评论
你知道吗?

100 声望
7 粉丝
文章目录
宣传栏