原文地址：http://justcoding.iteye.com/blog/2032627

CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。

一 基本语法

在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：

p:before  {}

不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老的浏览器可能会存在支持问题，不过伪元素大多是配合 CSS3 使用，就无所谓向下兼容了： 
img::after {}

这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以下几个值：

[String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：

a:after { content: ""; }

   attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：

a:after { content:"(" attr(href) ")"; }

url() / uri() – 用于引用媒体文件。示例：

h1::before { content: url(logo.png); }

counter() –  调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：

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

二 进阶技巧

清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动： 
.clear-fix { *overflow: hidden; *zoom: 1; } 
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

许多人喜欢给 blockquote 引用段添加巨大的引号作为背景，这种时候我们就可以用 :before 来代替 background 了，即可以给背景留下空间，还可以直接使用文字而非图片： 
blockquote::before { 
content: open-quote; 
position: absolute; 
z-index: -1; 
color: #DDD; 
font-size: 120px; 
font-family: serif; 
font-weight: bolder; 
}

三 特效妙用

除了简单的添加字符，配合 CSS 强大的定位和特效特性，完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是，如果不需要内容仅配合样式属性做出效果，内容属性也不能为空，即 content:”” 。否则，其他的样式属性一概不会生效。

鼠标移上链接，出现方括号：代码如下：

CSS部分：

a {

        /*border: 1px solid red;*/

        position: relative;

        left: 100px;

        display: inline-block;

        outline: none;

        text-decoration: none;

        color: #000;

        font-size: 32px;

        padding: 5px 10px;

}

/*左右方括号的初状态*/

a::before { content: "\5B"; left: 0px;-webkit-transition: all 1s linear;opacity: 0 }

a::after { content: "\5D"; right: 0px;-webkit-transition: all 1s linear;opacity: 0 }

/*对加入的中括号进行定位*/

    a::before, a::after { position: relative; }

    /*鼠标悬停时给a标签的内容加左方括号*/

    a:hover::before { content: "\5B"; left: -20px;-webkit-transition: all 1s linear; opacity: 1}

/*鼠标悬停时给a标签的内容加右方括号*/

    a:hover::after { content: "\5D"; right:  -20px;-webkit-transition: all 1s linear; opacity: 1}

html部分：

<body>

     <a>A</a>

</body>

　　同样，我们只需要配合 display: block 和 position: absolute ，就可以将其当成两个容器，拼合成悬浮出现双边框的特效：

<!--当鼠标悬停时，a标签内容会出现大小两个框-->*/--代码如下：

css部分：

   *<!--当鼠标悬停时，a标签内容会出现大小两个框-->*/

    a {

        position: relative;

        left: 100px;

        display: inline-block;

        outline: none;

        text-decoration: none;

        color: #000;

        font-size: 32px;

        padding: 0 10px;

    }

    /*鼠标悬停时给a标签的内容加大方框 */

    a:hover::before, a:hover::after {

        content: "";

        display: block;

        position: absolute;

        top: -15%;

        left: -14%;

        width: 120%;

        height: 120%;

        border-style: solid;

        border-width: 4px;

        border-color: red;

    }

/*鼠标悬停时给a标签的内容加小方框 ;相当于调整after这个添加的方框位置与大小*/

    a:hover::after {

        top: 0%;

        left: 0%;

        width: 100%;

        height: 100%;

        border-width: 2px;

        border-color: blue;

    }

html部分：

<body>

     <a>A</a>

</body>

　　

CSS ::before 和 ::after 伪元素另类用法的更多相关文章

  1. css ::before和::after伪元素的用法

    css ::before和::after伪元素的用法:http://blog.dimpurr.com/css-before-after/

  2. CSS你所不知的伪元素的用法

    你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5   CSS 有两个说不上常用的伪类 :before 和 :after, ...

  3. CSS——你所不知的 CSS ::before 和 ::after 伪元素用法（转）

    你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...

  4. CSS before和after伪元素

    CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...

  5. HTML：::before和::after伪元素的用法

    随笔 - 366  文章 - 0  评论 - 392 ::before和::after伪元素的用法   一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:li ...

  6. 你所不知的 CSS ::before 和 ::after 伪元素用法

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  7. CSS ::before 和 ::after 伪元素用法

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  8. [转]你所不知的 CSS ::before 和 ::after 伪元素用法

    SS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的 ...

  9. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

随机推荐

  1. How to reset password for unknow root

    1. Click "e" when entering the grub 2. Add option " init=/bin/sh" to linux line. ...

  2. win7 将所有 视图 改为 '详细信息'

    1.随便进入某个文件夹->(菜单栏中)查看->选'详细信息' 2.(菜单栏中)工具->文件夹选项->查看->'应用到文件夹'

  3. surface pro 4 wifi掉线问题

    更新你的无线网卡驱动到最新版本15.68.9032.47,重启.或者运行regedit修改注册表 HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\mr ...

  4. iOS缓存功能

    之前做缓存,没有考虑过这个具体的实现. 移动应用在处理网络资源时,一般都会做离线缓存处理,其中以图片缓存最为典型,其中很流行的离线缓存框架为SDWebImage. 但是,离线缓存会占用手机存储空间,所 ...

  5. js的forEach,for in , for of

    forEach遍历数组 [].forEach(function(value, index, array) { // ... }); 例子 var myArry =[1,2,3,4]; myArry.d ...

  6. MS SQL数据类型比较

    字符串数据类型 char此数据类型可存储1~8000个定长字符串,字符串长度在创建时指定:如未指定,默认为char(1).每个字符占用1byte存储空间.nchar此数据类型可存储1~4000个定长U ...

  7. Java Web学习过程的思维导图

    今天找文件,无意中翻到老师前段时间总结的知识点.觉得应该有点用处,所以分享给大家. 第一次在博客园发表,如有错误,还请指正.

  8. QT 调试时出现 During startup program exited with code 0xc0000135 错误

    我用的QT creator 5.70 出现上述原因是动态库加载不成功,但是QTcreator 不会提示什么动态库,具体缺乏什么动态库要用VS新建一个工程调用才可以看到,这也是QT Creator很大的 ...

  9. Windows Server 2008 R2域控组策略设置禁用USB

    问题: Windows Server 2008 R2域控服务器如何禁用客户端使用USB移动存储(客户端操作系统需要 Windows Vista以上的操作系统,XP以下的操作系统不能禁用USB移动存储) ...

  10. SLP测试记录

    个人感觉来说这个游戏对我没有什么吸引力...完全不知道用户需求在哪...是我最不喜欢的一个游戏 不过听制作团队之前的介绍,这应该不算是一个游戏,而是一个游戏练习器?所以从游戏的角度来评判的话感觉有很多 ...