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

「爱情、让人受尽委屈。」 2022-06-08 01:55 177阅读 0赞

# [::before和::after伪元素的用法][before_after] #

# 一、介绍 #

css3为了区分伪类和伪元素，伪元素采用双冒号写法。

*常见伪类——:hover,:link,:active,:target,:not(),:focus。*

*常见伪元素——::first-letter,::first-line,::before,::after,::selection。*

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：

![复制代码][copycode.gif]

<!DOCTYPE html>
    <meta charset="utf-8" />
    <style type="text/css">
        .phoneNumber::before {
        content:'\260E';
        font-size: 15px;
    }
    </style>
    <p class="phoneNumber">12345645654</p>

![复制代码][copycode.gif]

![101728385358643.png][]

**Note**:这些特殊字符的html，js和css的写法是不同的，具体可查看[html特殊字符的html，js，css写法汇总。][html_html_js_css]

# 二、content属性 #

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。

content可取以下值。

## 1、string ##

使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after\{content:""\}

举例：

![复制代码][copycode.gif]

<!DOCTYPE html>
    <meta charset="utf-8" />
    <style type="text/css">
    p::before{
        content: "《";
        color: blue;
    }
    p::after{
        content: "》";
        color: blue;
    }
    </style>
    <p>平凡的世界</p>

![复制代码][copycode.gif]

![110929133328022.png][]

## 2、attr() ##

通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。

![110937215201245.png][]

## 3、url()/uri() ##

用于引用媒体文件。

举例：“百度”前面给出一张图片，后面给出href属性。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

效果：

![041517505323703.png][]

## 4、counter() ##

调用计数器，可以不使用列表元素实现序号功能。

配合counter-increment和counter-reset属性使用：

h2:before \{ counter-increment: chapter; content: "Chapter " counter(chapter) ". " \}

代码:

![复制代码][copycode.gif]

![复制代码][copycode.gif]

效果：

![041646256106350.png][]

了解更多可参考：[https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters][https_developer.mozilla.org_en-US_docs_Web_Guide_CSS_Counters]

# 三、使用 #

## 1、清除浮动 ##

[清除浮动][Link 1]方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动

![复制代码][copycode.gif]

.cf:before,
    .cf:after {
        content: " ";
        display: table; 
    }
    .cf:after {
        clear: both;
    }
    .cf {
        *zoom: 1;
    }

![复制代码][copycode.gif]

## 2、模拟float:center的效果 ##

float没有center这个取值，但是可以通过伪类来模拟实现。

这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。

核心css如下：

![复制代码][copycode.gif]

#page-wrap { width: 60%; margin: 40px auto; position: relative; }
    #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
    #l, #r { width: 49%; }
    #l { float: left; }
    #r { float: right; }
    #l:before, #r:before { content: ""; width: 125px; height: 250px; }
    #l:before { float: right; }
    #r:before { float: left; }

![复制代码][copycode.gif]

完整代码如下：

![ContractedBlock.gif][]

![111029267074149.png][]![111033227399273.png][]

出自：[https://css-tricks.com/float-center/][https_css-tricks.com_float-center]

## 3、做出各种图形效果 ##

举例：一个六角星

![复制代码][copycode.gif]

![复制代码][copycode.gif]

\#star-six的div是一个正三角行，\#star-six::after是一个倒三角形，通过绝对定位，调整其位置即可实现六角星的效果。

![111044162547286.png][]

[点我][Link 2]查看更多。

## 4、不使用图片创建小图标 ##

举例：比如一个电话

很巧妙的应用一个div左border加圆角当机身，::before和::after配合圆角当听筒。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![111116453175937.png][]

更多图标：

![ContractedBlock.gif][]

![111126032237893.png][]

这个效果来自：[http://www.w3cfuns.com/blog-5444604-5402127.html][http_www.w3cfuns.com_blog-5444604-5402127.html]

有大神用伪元素创建了84种小图标，具体可查看[http://nicolasgallagher.com/pure-css-gui-icons/][http_nicolasgallagher.com_pure-css-gui-icons]

## 5、显示打印网页的URL ##

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![041721073927186.png][]

## 6、给blockquote添加引号 ##

经常用到给blockquote 引用段添加巨大的引号作为背景，可以用 ：:before 来代替 background 。好处是即可以给背景留下空间，还可以直接使用文字而非图片：

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![111141231299523.png][]

## 7、超链接特效 ##

举例：配合 CSS定位实现一个鼠标移上去，超链接出现方括号的效果

![复制代码][copycode.gif]

![复制代码][copycode.gif]

![111326598647483.png][]

更多创意链接特效可参考： [Creative Link Effects][] 。

## 8、::before和::after实现多背景图片 ##

举例：一个标签应用5张背景图

![ContractedBlock.gif][]

![111409393792336.png][]

原效果来自：[Multiple Backgrounds and Borders with CSS 2.1][]

这个效果看的真的是脑洞大开，虽然多背景图用css3的[background-image][]很容易就能实现。但是这篇文章是10年写的，已经过去5年了，想想也正是他们这样的尝试和努力才加速了css3标准的制定，让今天的开发更easy。今天的我们又能为5年后的开发人员做些什么贡献呢？

[before_after]: http://www.cnblogs.com/starof/p/4459991.html
[copycode.gif]: /images/20220608/5763443cb8a54cefafa6f5f925608160.png
[101728385358643.png]: /images/20220608/607c7231c24b492b94b160e4fb371cfd.png
[html_html_js_css]: http://www.cnblogs.com/starof/p/4718550.html
[110929133328022.png]: /images/20220608/11ca2338f62146feb0894ae5a6364efa.png
[110937215201245.png]: /images/20220608/519cfde70d7e4b7694c994e8e63aff94.png
[041517505323703.png]: /images/20220608/fde91cd1431f40c1bb8cd0ff4281ccb0.png
[041646256106350.png]: /images/20220608/533f006dc2be4c39a597ed3083146d0c.png
[https_developer.mozilla.org_en-US_docs_Web_Guide_CSS_Counters]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
[Link 1]: http://www.cnblogs.com/starof/p/4608962.html#clearfloat
[ContractedBlock.gif]: /images/20220608/68511bb0ba394bfebd3b98c2d2a1b34d.png
[111029267074149.png]: http://images0.cnblogs.com/blog2015/315302/201508/111029267074149.png
[111033227399273.png]: /images/20220608/552a316391e04bdc9595f5a4c9d77ef6.png
[https_css-tricks.com_float-center]: https://css-tricks.com/float-center/
[111044162547286.png]: /images/20220608/5ae7168dcab14a0db72efca905821bae.png
[Link 2]: https://css-tricks.com/examples/ShapesOfCSS/
[111116453175937.png]: /images/20220608/f04f9ea569b04d94869f458e40de445d.png
[111126032237893.png]: /images/20220608/3e3b223f0dd54eb3959b0d8b36d9e57a.png
[http_www.w3cfuns.com_blog-5444604-5402127.html]: http://www.w3cfuns.com/blog-5444604-5402127.html
[http_nicolasgallagher.com_pure-css-gui-icons]: http://nicolasgallagher.com/pure-css-gui-icons/
[041721073927186.png]: /images/20220608/cc75b227195147be8be8e8a9f7937051.png
[111141231299523.png]: /images/20220608/842760d90e274788a215a18ee6484347.png
[111326598647483.png]: /images/20220608/211af3c8580d443e8e3b090bad48d8be.png
[Creative Link Effects]: http://tympanus.net/Development/CreativeLinkEffects/
[111409393792336.png]: /images/20220608/aae78b6c820b4182b38c51f182366fc6.png
[Multiple Backgrounds and Borders with CSS 2.1]: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
[background-image]: http://www.cnblogs.com/starof/p/4545033.html