原文传送门： https://www.cnblogs.com/staro...

一、介绍

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

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

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

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

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

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

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

复制代码
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">

.phoneNumber::before {

content:'\260E';

font-size: 15px;

}
</style>
<p class="phoneNumber">12345645654</p>
复制代码

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

二、content属性

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

content可取以下值。

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

举例：

复制代码
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
p::before{

content: "《";

color: blue;

}
p::after{

content: "》";

color: blue;

}
</style>
<p>平凡的世界</p>
复制代码

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

<style type="text/css">
a::after{

content: "(" attr(href) ")";

}
</style>
starof

3、url()/uri()
用于引用媒体文件。

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

复制代码
<style>
a::before{

content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");

}
a::after{

content:"("attr(href)")";

}
a{

text-decoration: none;

}

</style>

<body>
百度
</body>
复制代码
效果：

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

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

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

代码:

复制代码
<style>
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) "、";

}

</style>

<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
复制代码
效果：

了解更多可参考：https://developer.mozilla.org...

三、使用

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

复制代码
.cf:before,
.cf:after {

content: " ";

display: table;

}
.cf:after {

clear: both;

}
.cf {

*zoom: 1;

}
复制代码
2、模拟float:center的效果
float没有center这个取值，但是可以通过伪类来模拟实现。

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

核心css如下：

复制代码

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; }

复制代码
完整代码如下：

出自：https://css-tricks.com/float-...

3、做出各种图形效果
举例：一个六角星

复制代码
<style>

star-six {

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}

star-six::after {

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
<body>
<div id="star-six"></div>
</body>
复制代码

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

点我查看更多。

4、不使用图片创建小图标
举例：比如一个电话

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

复制代码
<style type="text/css">

#phone{

    width:50px;

    height:50px;

    border-left:6px solid #EEB422;

    border-radius:20%;

    transform:rotate(-30deg);

    -webkit-transform:rotate(-30deg);

    margin:20px;

    margin-right:0px;

    position:relative;

    display: inline-block;

    top: -5px;

}

 #phone:before{

    width:15px;

    height:15px;

    background:#EEB422;

    border-radius: 20%;

    content: "";

    position: absolute;

    left:-2px;

    top: 1px;

 }

 #phone:after{

    width:15px;

    height:15px;

    background:#EEB422;

    border-radius: 20%;

    content: "";

    position: absolute;

    left:-3px;

    top: 34px;

 }

</style>
<div id="wraper">

<div id="phone"></div>

</div>
复制代码

更多图标：

这个效果来自：http://www.w3cfuns.com/blog-5...

有大神用伪元素创建了84种小图标，具体可查看http://nicolasgallagher.com/p...

5、显示打印网页的URL
复制代码
<style>
@media print {
a[href]:after {

content: " (" attr(href) ") ";

}
}
</style><body>
百度
</body>
复制代码

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

复制代码
<meta charset="utf-8"/>
<style type="text/css">

blockquote::before {

content: open-quote;

color: #ddd;

z-index: -1;

font-size:80px;

}
</style>
<blockquote>引用一个段落,双引号用::before伪元素实现</blockquote>
复制代码

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

复制代码
<meta charset="utf-8" />
<style type="text/css">
body{

background-color: #425a6c;

}

a {

position: relative;

display: inline-block;

outline: none;

color: #fff;

text-decoration: none;

font-size: 32px;

padding: 5px 20px;

}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "5B"; left: -10px; }
a:hover::after { content: "5D"; right: -10px; }
</style>
鼠标移上去出现方括号
复制代码

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

8、::before和::after实现多背景图片
举例：一个标签应用5张背景图

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

：：before和：：after的详细介绍的更多相关文章

  1. [No0000A7]批处理经常用到的变量及批处理>NUL详细介绍

    绝对路径是指调用绝对的程序位置的路径,例如: start C:\Windows\test.exe 相对路径是文件改变路径以后还会按照变量的路径所在位置去调用,例如: start %WINDIR%\te ...

  2. linux配置网卡IP地址命令详细介绍及一些常用网络配置命令

    linux配置网卡IP地址命令详细介绍及一些常用网络配置命令2010-- 个评论 收藏 我要投稿 Linux命令行下配置IP地址不像图形界面下那么方 便,完全需要我们手动配置,下面就给大家介绍几种配置 ...

  3. _MSC_VER详细介绍

    _MSC_VER详细介绍 转自:http://www.cnblogs.com/braver/articles/2064817.html _MSC_VER是微软的预编译控制. _MSC_VER可以分解为 ...

  4. php CGI、Fastcgi、PHP-FPM的详细介绍与之间的关系

    以下PHP CGI.Fastcgi.PHP-FPM的一些信息归纳和汇总----->详细介绍与之间的关系 一:CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的 web ...

  5. RabbitMQ消息队列（一）: Detailed Introduction 详细介绍

     http://blog.csdn.net/anzhsoft/article/details/19563091 RabbitMQ消息队列(一): Detailed Introduction 详细介绍 ...

  6. doT.js详细介绍

    doT.js详细介绍   doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolati ...

  7. Linux截屏工具scrot用法详细介绍

    Scrot是Linux命令行中使用的截图工具,能够进行全屏.选取等操作,下面小编将针对Scrot截图工具的用法给大家做个详细介绍,通过操作实例来学习Scrot的使用.   在Linux中安装Scrot ...

  8. Oracle Merge into 详细介绍

    Oracle Merge into 详细介绍 /*Merge into 详细介绍MERGE语句是Oracle9i新增的语法,用来合并UPDATE和INSERT语句.通过MERGE语句,根据一张表或子查 ...

  9. cPage分页详细介绍

    asp.net中各种数据控件,datalist.gridview.Repeater等分页是最常用的功能,几乎任何一个B/S项目,无论是系统还是网站都会用到.分页时,读取整个数据,直接绑定到控件,都可以 ...

  10. 【转载】硬盘MBR详细介绍

    原文地址:http://blog.chinaunix.net/uid-15007890-id-106892.html 硬盘MBR详细介绍      硬盘是现在计算机上最常用的存储器之一.我们都知道,计 ...

随机推荐

  1. Nginx https服务器证书安装步骤

    本文档指导您如何在 Nginx 服务器中安装 SSL 证书. 说明: 本文档以证书名称 www.domain.com 为例. Nginx 版本以 nginx/1.16.0 为例. 当前服务器的操作系统 ...

  2. ECharts-第一篇最简单的应用

    1.简单演示一个饼状图 准备好echarts-all.js 2.编写页面代码 <!DOCTYPE html> <html> <head> <meta char ...

  3. linux复杂命令

    1,查看包含zypper且不包含ar的进程信息的2,3,8,9列信息 ps -ef|grep zypper|grep -v ar|awk '{print $2,$3,$8,$9}' eg:查看包含zy ...

  4. 教你使用Python制作酷炫二维码

    这篇文章讲的是如何利用python制作狂拽酷炫吊炸天的二维码,非常有趣哦! 可能你见过的二维码大多长这样: 普普通通,平平凡凡,没什么特色... 但,如果二维码长这样呢! 或者 这样! 是不是炒鸡好看 ...

  5. SCUT - 297 - 狂符「幻视调律(Visionary Tuning)」 - 重链剖分

    https://scut.online/p/297 一般的树剖是关于点权的,但是突发奇想好像边权也是一样的.做一些小改动. #include<bits/stdc++.h> #define ...

  6. Gradle打包问题Deprecated Gradle features were used in this build, making it incompatible with Gradle 5.0

    前言 使用gradle打包react native的时候,出现了如下报错,下面和大家说一下解决的具体办法 Deprecated Gradle features were used in this bu ...

  7. hash和history

    location.hash="aaa" history.pushState({},'', "home") history.replaceState() hist ...

  8. 百度地图api 实例 自动提示 并计算两地的行驶距离

    百度地图api 实例 自动提示 并计算两地的行驶距离 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  9. Spring Data Elasticsearch 用户指南

    https://www.jianshu.com/p/27e1d583aafb 翻译自官方文档英文版,有删减. BioMed Central Development Team version 2.1.3 ...

  10. NLP 中 Attention Model 解析

    Attention Model,简称AM模型,本文只谈文本领域的AM模型,其实图片领域AM的机制也是相同的. 目前绝大多数文献中出现的AM模型是附着在Encoder-Decoder框架下的,但是其实A ...