原文地址：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. maven配置

    java 环境变理 http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html maven环境变理 http://www.cnblog ...

  2. sql条件为空查询全部，不为空按条件查询以及多条件筛选查询。

    procedure queryLackLonOrLatTdCell(i_region_name varchar2, i_state varchar2) is begin select region_n ...

  3. BundleConfig.cs

    namespace Knockout.App_Start { public class BundleConfig { public static void RegisterBundles(Bundle ...

  4. iOS -Swift 3.0 -for(循环语句用法)

    // // ViewController.swift // Swift-循环语句 // // Created by luorende on 16/12/08. // Copyright © 2016年 ...

  5. lua UT测试工具

    luaunit Luaunit is a unit-testing framework for Lua, in the spirit of many others unit-testing frame ...

  6. Sublime Text3 以及 SublimeREPL使用Virtualenv执行python

    1. SublimeText3 安装Virtualenv插件(Crtl+Shift+P) 2. 新建python虚拟环境: Crtl+Shift+P,选中Virtualenv:New选项,在底部Vir ...

  7. IOS遍历方式

    NSArray* arrays = @[@"1",@"2",@"3",@"4",@"5",@&quo ...

  8. Windows Phone 九、SQLite数据库

    使用SQLite数据库 安装 SQLite for Windows Phone 8.1 插件新建 Windows Phone 8.1 项目添加 SQLite for Windows Phone 8.1 ...

  9. （一）NOR FALSH 讲解

    nor flash 起始地址: 1F FFFF  = 1 1111          1111 1111 1111 1111 = 2^20 *2 = 2^21=2M Nor Flash 采用了 A0- ...

  10. Apache2.4开启GZIP功能

    HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的 ...