css中的伪元素before和after,其实有很多小的妙用。

一、基础用法

w3c中的基础用法：用来给元素的内容前面（对应：before）或者后面（对应：after）插入新内容。

<p>

   love

</p>

<style>

//添加文字

   p:before{

       content:"I";

     }

   p:after {

       content:"you";

     }

//添加图片

    p:before {

       content: url(logo.gif) ;

    }

//添加href地址

    p:after {

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

    }

</style>

分别显示的是“I love you” 、图片、地址。

二、扩展

除此之外，我们还能常常见到before和after伪元素，可以用来加小图标、清除浮动等作用。

1清除浮动

从上面的截图中，可以看到bootstrap框架中设置 :before和 :after   clear：both,来清除浮动。

.clear-float {

     overflow:hidden;

}

.clear-float:{

   content:" "; display:table;  clear:both;

}

2 在特定位置添加小图标

有时候我们需要通过相对或者绝对定位的方式，来给父子元素放在相应的位置。那么用伪元素可以减少子元素标签的设置。举例如下：

<style>

   .test{ position:relative; width:300px; height:200px; border:1px solid #ddd;}

   .test:before{position:absolute; display:block; content:" ";top:0px; left:-101px;width:0; height:0; border-right-color: #e0e0e0; border: 50px solid transparent; }

</style>

<div class="test"></div>

结果如下：

由图中可以看到通过将伪元素定位，实现了三角形的呈现。

3 小demo

<style>

  div{margin:100px; text-align:center;}

  .demo{

     display:inline-block;

     color:#fff;

     font-size:30px;

     width:200px;

     position:relative;

  }

   .demo:before,.demo:after{

     position:absolute;

   }

   .demo:hover:before{

     content:"^+^";

     left:-50px;

   }

   .demo:hover:after{

     content:"^+^";

     right:-50px;

   }

</style>

</head>

<body style="background-color: #0C1021">

    <div>

        <a class="demo" href="#">come on! baby</a>

    </div>

</body>

可以自己测试结果看下。

就先写到这里，表示加班到现在，还继续写了这篇博客，眼睛已经累的不行。^_^！

谈谈css中的before和after的更多相关文章

  1. 谈谈CSS中一些比较"偏门"的小知识

    前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象:同时也希望有需要的人能有收获! 1.常见的浏览器内核: 以IE为代表 ...

  2. 谈谈CSS中em与px的差异

    在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...

  3. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  4. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  5. 探讨css中repaint和reflow

    (个人blog迁移文章.) 前言: 页面设计中,不可避免的需要浏览器进行repaint和reflow.那到底什么是repaint和reflow呢.下面谈谈自己对repaint和reflow的理解,以及 ...

  6. 谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. 问答：怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式？

    好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...

  9. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

随机推荐

  1. 赵雅智_ContentProvider

    ContentProvider介绍 ContentProvider是不同应用程序之间进行交换数据的标志API 也就是说:一个应用程序通过ContentProvider暴露自己的数据操作接口,那么无论该 ...

  2. Swift学习笔记七

    控制流 Swift提供了和C类似的控制流表达式,包括for.while.if.switch.当然也包括break和continue这种语句来引导控制流到某个指定点的语句. 在C的for基础上,Swif ...

  3. MySQL Cluster基础知识简介以及基本参数介绍

    PS:这些资料都是以前整理的,有些有可能是在网上copy别人的,但是时间长了,记不得出处了,sorry! 在MySQL Cluster环境的配置文件config.ini里面,每一类节点都有两个(或以上 ...

  4. Javassist初体验

           最初接触javassist是在研究dubbo源码的时候,那会对其的理解还停留在动态生成字节码的位置,可以做动态代理之类的动态化处理.最近由于项目需要扫描springMVC中control ...

  5. 20种常用的DOS命令小结

    先介绍一下通配符的概念. 通配符*和? *表示一个字符串 ?只代表一个字符 注意通配符只能通配文件名或扩展名,不能全都表示.例如我们要查找以字母y开头的所有文件,可以输入以下命令:dir y*.*:如 ...

  6. Swift 玩转gif

    众所周知,iOS默认是不支持gif类型图片的显示的,但是我们项目中常常是需要显示gif为动态图片.那肿么办?第三方库?是的 ,很多第三方都支持gif , 如果一直只停留在用第三方上,技术难有提高.上版 ...

  7. 快递鸟电子面单API对接方法?

    之前说了一下快递公司.菜鸟和快递鸟的电子面单接口,很多人不知道快递鸟要怎么对接,现在为大家讲解一下.快递鸟是全球物流接口服务商,为电商 ERP.电商平台.仓储.清关公司提供物流跟踪.电子面单.智选物流 ...

  8. nodejs的mysql模块学习(四)断开数据库连接

    断开连接有两种方式 end()函数 在这种情况下 所有先前排队的查询 仍然可以继续继续发送到服务器,但是如果在执行到断开连接的命令之前发生了致命的错误,那么end()将不会被执行 connection ...

  9. 【报错】"The constructor Notification(int, CharSequence, long) is deprecated

    Notification的构造方法 Notification(int, CharSequence, long) 在API11之后就淘汰了,之后的API需要用Notification.Builder() ...

  10. Linux 通过 load average 判断服务器负载情况

    Linux中load average判断服务器负载情况 转载文章 http://www.111cn.net/sys/linux/56003.htm 写的比较详细,推荐看看.