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

一 基本语法

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

  p:before  {}

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

  img::after {}

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

  • [String] - 使用引号包括一段字符串,将会向元素内容中添加字符串。示例:

    1. a:after { content: "↗"; }
  • attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:

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

  • url() / uri() – 用于引用媒体文件。示例:
    1. h1::before { content: url(logo.png); }
  • counter() –  调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:

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

二 进阶技巧

清除浮动是一个时常会遇到的问题,不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在,无需增加没有意义的元素,仅需要以下样式即可在元素尾部自动清除浮动:

  1. .clear-fix { *overflow: hidden; *zoom: 1; }
  2. .clear-fix:after { display: table; content: ""; width: 0; clear: both; }

许多人喜欢给 blockquote 引用段添加巨大的引号作为背景,这种时候我们就可以用 :before 来代替 background 了,即可以给背景留下空间,还可以直接使用文字而非图片:

  1. blockquote::before {
  2. content: open-quote;
  3. position: absolute;
  4. z-index: -1;
  5. color: #DDD;
  6. font-size: 120px;
  7. font-family: serif;
  8. font-weight: bolder;
  9. }

三 特效妙用

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

悬浮出现方括号

鼠标移上链接,出现方括号:

  1. a {
  2. position: relative;
  3. display: inline-block;
  4. outline: none;
  5. text-decoration: none;
  6. color: #000;
  7. font-size: 32px;
  8. padding: 5px 10px;
  9. }
  10. a:hover::before, a:hover::after { position: absolute; }
  11. a:hover::before { content: "\5B"; left: -20px; }
  12. a:hover::after { content: "\5D"; right:  -20px; }

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

  1. a {
  2. position: relative;
  3. display: inline-block;
  4. outline: none;
  5. text-decoration: none;
  6. color: #000;
  7. font-size: 32px;
  8. padding: 0 10px;
  9. }
  10. /* 大框 */
  11. a:hover::before, a:hover::after {
  12. content: "";
  13. display: block;
  14. position: absolute;
  15. top: -15%%;
  16. left: -14%%;
  17. width: 120%;
  18. height: 120%;
  19. border-style: solid;
  20. border-width: 4px;
  21. border-color: #DDD;
  22. }
  23. /* 小框 */
  24. a:hover::after {
  25. top: 0%;
  26. left: 0%;
  27. width: 100%;
  28. height: 100%;
  29. border-width: 2px;
  30. }

:before :after的更多相关文章

  1. java web 开发三剑客 -------电子书

    Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知In ...

  2. 所有selenium相关的库

    通过爬虫 获取 官方文档库 如果想获取 相应的库 修改对应配置即可 代码如下 from urllib.parse import urljoin import requests from lxml im ...

  3. In-Memory:内存数据库

    在逝去的2016后半年,由于项目需要支持数据的快速更新和多用户的高并发负载,我试水SQL Server 2016的In-Memory OLTP,创建内存数据库实现项目的负载需求,现在项目接近尾声,系统 ...

  4. 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  5. 【.net 深呼吸】细说CodeDom(8):分支与循环

    有人会问,为啥 CodeDom 不会生成 switch 语句,为啥没生成 while 语句之类.要注意,CodeDom只关心代码逻辑,而不是语法,语法是给写代码的人用的.如果用.net的“反编译”工具 ...

  6. 【原】Android热更新开源项目Tinker源码解析系列之三:so热更新

    本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 A ...

  7. App开发:模拟服务器数据接口 - MockApi

    为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...

  8. TODO:macOS编译PHP7.1

    TODO:macOS编译PHP7.1 本文主要介绍在macOS上编译PHP7.1,有兴趣的朋友可以去尝试一下. 1.下载PHP7.1源码,建议到PHP官网下载纯净到源码包php-7.1.0.tar.g ...

  9. In-Memory:在内存中创建临时表和表变量

    在Disk-Base数据库中,由于临时表和表变量的数据存储在tempdb中,如果系统频繁地创建和更新临时表和表变量,大量的IO操作集中在tempdb中,tempdb很可能成为系统性能的瓶颈.在SQL ...

  10. In-Memory:内存优化表的事务处理

    内存优化表(Memory-Optimized Table,简称MOT)使用乐观策略(optimistic approach)实现事务的并发控制,在读取MOT时,使用多行版本化(Multi-Row ve ...

随机推荐

  1. React 学习资源汇总(最全的 React 学习资料)

    http://www.360doc.com/content/16/1108/10/17722897_604827790.shtml

  2. table清除样式大全

    table{width:100%;text-align:center;border-collapse:collapse;border-spacing:1;border-spacing:0; }tabl ...

  3. 解决Strokeit在win8下的图标问题和开机启动问题

    Strokeit目前和Windows 8有一点不兼容,就是运行之后,任务栏会有它的图标,看着很不爽,用兼容模式运行可解决这个问题,但是这样一来就不能开机自动运行了,本文主要解决这个问题.  (参考资料 ...

  4. HTML 教程延伸阅读:改变文本的外观和含义

    很多标签都可以用来改变文本的外观,并为文本关联其隐藏的含义.总地来说,这些标签可以分成两类:基于内容的样式(content-based style)和物理样式(physical style). 基于内 ...

  5. C++11新特性学习

    http://www.cprogramming.com/c++11/c++11-lambda-closures.html

  6. python 函数传递参数的多种方法

    python中函数根据是否有返回值可以分为四种:无参数无返回值,无参数有返回值,有参数无返回值,有参数有返回值. Python中函数传递参数的形式主要有以下五种,分别为位置传递,关键字传递,默认值传递 ...

  7. PHP redis 批量操作

    参考网站 phpredis扩展 :https://github.com/phpredis/phpredis#pconnect-popen 命令参考:http://doc.redisfans.com   ...

  8. (SenchaTouch+PhoneGap)开发笔记(1)开发环境搭建一

    1.下载senchaTouch 2.下载senchaCMD 3.安装ruby(for windows ) 4.senchaCmd创建项目: 打开senchacmd,cd到senchaTouch的目录如 ...

  9. css3各个属性的兼容

    1.transition:IE10. Firefox.Opera.Chrome支持: Safari支持替代的-webkit-transition属性: 2.animation: IE10.FIrefo ...

  10. WCF传输图片解决方案

    图片无法序列化后传输,但我们可以将图片转二进制字符串传输.然后在服务端将二进制字符串转图片. 将图片转字符串的例子: private byte[] BmpToJpegBuff(Image img) { ...