引入

　　　提到伪类，在我的印象中最常用的不过是:hover、:active、:link、:visited，还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等，说实在其他的我发现"然并卵"。

　　   百度一下:after和:before会发现有很多关于研究它们用法的文章，形形色色各式各样，说明这两个伪元素在实际工作中还是很实用的，再结合css3的动画，它们能为页面添加很多意想不到的效果！

从学习伪类，不小心又延伸到了伪类元素（eg.我们常见的::before和:hover之间为什么缺少了一个冒号呢?），那什么又叫伪类元素？伪类和伪类元素有什么区别？下面就跟着我一起来学习一下吧O(∩_∩)O~有说的不对的地方欢迎批评指正！~

伪类和伪元素

　　 w3c上对伪类和为元素的定义分别为,　　

  • 伪类：伪类用于向某些选择器添加特殊的效果。
  • 伪元素：伪元素用于将特殊的效果添加到某些选择器

css3为了明确伪类和伪元素的区别，已经明确了单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素

span:hover     //伪类

span::before   //伪元素

但是，为了保证兼容性，现在伪元素普遍还是使用单引号。下面我将用单引号的形式给大家做介绍~

常见的伪类（pseudo-classes）和伪元素（pseudo-elements）

　　伪元素的兼容性

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • 几乎所有的移动浏览器。

伪元素:before和:after的定义和基本用法

 定义

:before   选择器在被选元素的内容前面插入内容。

:after     选择器在被选元素的内容后面插入内容。

使用

　　 使用 content 属性来指定要插入的内容。　　

　　　content有几个比较有用的值：

  •  [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) ". " }

----------------------------------- 一个粗糙的栗子 ---------------------------------------

为了写出让自己看得懂也能让别人看的懂的博客，下面我们来举一个（粗糙的）栗子~

详细代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    blockquote{

        background-color: #ccc;

        color: #fff;

        height: 100px;

        width: 400px;

        text-align: center;

        line-height: 100px;

    }

    blockquote:hover:before{

        content: '啊啊啊啊哦';

        color: red;

    }

    blockquote:hover:after{

        content: '啊啊啊啊哦诶';

        color: green;

    }

    </style>

</head>

<body>

    <blockquote>我是一个blockquote</blockquote>

</body>

</html>

鼠标没有移动到blockqoute上的时候是酱紫的，

鼠标移动到blockqoute上的时候是酱紫的，

这样就实现了 “ 伪元素:before和:after将特殊的效果添加到blockqoute上的效果  ”，当然这个很糙的栗子只是体现了它的基本用法而已，下面我们来了解一下它的一些有意思的用法吧~

有意思的用法

  • 清浮动

好吧，第一个用法确实没什么意思╮(╯_╰)╭，但是很实用有木有~(～￣▽￣)～

网上在介绍清浮动中最狂拽炫酷吊炸天的清浮动方法 : )  ，只要把.clearfix加在浮动父级就可以了

    .clearfix{zoom:1;}

    .clearfix:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}

给浮动父级添加clearfix后

  • 模拟float:center（当然并没有center这个值，只是模拟）

　 

这样利用伪元素:before和浮动，就能创造出两个没有内容的占位块，实现文字环绕图片的效果了~~效果蛮不错的有木有

    .box .left{   //左边的文字块

        float: left;

    }

    .box .left:before{

        content: '';

        height: 245px;

        width: 153px;

        float: right;

    }

    .box .right{  //右边的文字块

        float: right;

    }

    .box .right:before{

        content: '';

        height: 245px;

        width: 153px;

        float: left;

    }
  •  一些实用的小图标、小图形

      

　　这些图标都是可以利用伪元素做出来的哟！~不用再引用麻烦的bootstrap图标了，还得引入他们的一堆文件惹，真麻烦~ (￣～￣) ~真矫情

DEMO（实用小图标的源css代码都在这里面哟！）

     

还有3D的ribbons，不用图片也可以呢！只要只兼容IE8+就可以用啦，Everybody loves ribbons,so do I. 时常觉得CSS真心是艺术~

DEMO（ribbon源码）

  •  作为列表序号

怎样作为列表序号呢？我先举个栗子~

像这样的1,2,3的序号一般大家是怎样做的呢？用span？用图片？是不是用了span后还要进行定位？是不是很麻烦呢？

现在我们可以用伪元素来做列表序号，而且列表的一项删除了以后，其他的列表序号会自动改变，成为一个有顺序的列表~484很方便！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    *{

        margin: 0;

        padding: 0;

    }

    ul{

        width:1000px;

        margin: 0 auto;

        counter-reset:li;

    }

    li{

        list-style: none;

    }

    ul>li{

        background-color: #ccc;

        margin-top: 10px;

    }

    ul>li:before{

        content: counter(li);

        counter-increment:li;

        background-color: #333;

        padding: 0 5px;

        color: #fff;

        margin-right: 10px;

    }

    </style>

</head>

<body>

    <ul>

        <li>List item one</li>

        <li>The second item on the list</li>

        <li>Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>

        <li>And here is number four.</li>

        <li>The fifth item on the list</li>

        <li>The sixth item on the list</li>

    </ul>

</body>

</html>

不过这里需要一个用到content的一个属性，那就是counter()。对于couter又是一个知识点，后期可以进行深入了解，这里找到了一个相关的有用博文，请戳~

  •  tooltip

作为文字提示~在这里我就不赘述啦

　　DEMO

  •  炫酷导航效果

      这些导航真的很炫酷，除了很多css3的效果外，很多效果都用到了:before和:after伪元素~有空的时候一定要一个个做做试试看！

　　DEMO

  •  其他

　　　　对于伪元素的应用上还有很多值得人去探寻的东西，我提到的估计也不过是冰山一角，小小的伪元素竟然能实现那么多的功能~看来需要学的还有很多

参考资料：http://segmentfault.com/a/1190000000484493

http://www.w3cplus.com/css3/pseudo-element-roundup.html

:after和:before炫酷用法总结的更多相关文章

  1. 简单CSS3实现炫酷读者墙

    如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处. 先看demo(请使用Chrome或者Firefox浏览,IE的靠边): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行. ...

  2. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  3. Css3炫酷总结使用

    先从CSS3的选择器说起: E F:所有的子孙元素: E>F: E中的子元素: E+F:E元素之后的最近的选择器: E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括) att ...

  4. Android开发必知--WebView加载html5实现炫酷引导页面

    大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5 ...

  5. Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI

    1.概述 哈,今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过 TabPageIndicator,并且很多知名APP都使用过这个 ...

  6. 教你做炫酷的碎片式图片切换 (canvas)

    前言 老规矩,先上 DEMO 和 源码.图片区域是可以点击的,动画会从点击的位置开始发生. 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动.最近 ...

  7. 2019基于Hexo快速搭建个人博客，打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  8. 使用CoordinatorLayout打造各种炫酷的效果

    使用CoordinatorLayout打造各种炫酷的效果 自定义Behavior -- 仿知乎,FloatActionButton隐藏与展示 NestedScrolling 机制深入解析 一步步带你读 ...

  9. 使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 近期工作有涉及到数字大屏的需求,于是利用业余时间,结合 Three.js ...

随机推荐

  1. PHP-递归扫描目录和删除目录

    (1) 通过递归扫描目录并打印 // php递归扫描目录 function scanMyDir($path){ // 打开目录 $dh = opendir($path); echo '<ul&g ...

  2. 使用Glyph Designer创建位图字体

     使用Glyph Designer创建位图字体 转http://book.2cto.com/201210/6610.html   <iOS 5 cocos2d游戏开发实战(第2版)>将引导 ...

  3. 搜索引擎 ElasticSearch 之 步步为营 【主目录】

    ElasticSearch 是一款著名的分布式搜索引擎框架,采用Java编写.具有搜索速度快,实时搜索等特色. 以下为官网对ElasticSearch的介绍: Elasticsearch 是一款高可伸 ...

  4. 搜索引擎 ElasticSearch 之 步步为营2 【基础概念】

    在正式学习 ElasticSearch 之前,首先看一下 ElasticSearch 中的基本概念. 这些概念将在以后的章节中出现多次,所以花15分钟理解一下是非常值得的. 英文好的同学,请直接移步官 ...

  5. RichTextBox着色与着色不闪

    近来写的一个数据查询分析器意外的快捷,不到两晚工夫就搞定了.完成度相当的高.当然少不了关键字着色,不过着色的代码来自的网上,看了一下感觉过多的循环 //文本框改变事件 int index = this ...

  6. Hive使用技巧

    hive默认查询不会显示列名, 当一个表字段比较多的时候,往往看不出值与列之间的对应关系,对日常查错及定位问题带来不便,像下面这样. hive> >select * from exampl ...

  7. spring AOP应用

    转自:http://wb284551926.iteye.com/blog/1887650 最近新项目要启动,在搭建项目基础架构的时候,想要加入日志功能和执行性能监控的功能,想了很多的想法,最后还是想到 ...

  8. Mac os x下配置nginx + php

    一直都没使用过PHP的,最近leader推荐使用他在维护的一个移动端的js框架,在本地合并压缩使用的是php环境处理的,so,只能是搭一个PHP的环境了.一直使用的本地代理服务器都是nginx,虽然P ...

  9. PHP中关于位运算符 与 或 异或 取反

    <?php /** * author:LMS * createTime:2015/07/22 * desctiption:位运算[ & | ^ ~ ] * 与&:如果a.b两个值 ...

  10. Attic 0.8.1 发布，备份程序

    Attic 0.8.1 修复了昨天刚发布的 Attic 0.8 的一个段错误. Attic 是一个可以保证文件不重复的备份程序.Attic 的主要目标是提供一个高效和安全的方法来备份数据.重复数据删除 ...