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. Java模拟网站登录02【转载】

    如何用Java代码模拟一些如百度.QQ之类的网站登录?有两个方式,一是发送模拟请求,二是模拟浏览器操作,而这两种方式恰好在Java有开源实现,在这里介绍一个工具包,它是家喻户晓的HttpClient. ...

  2. IOS Note - Core NS Data Types

    NSString (Immutable)NSMutableString (rarely used)NSNumberNSValueNSData (bits)NSDateNSArray (Immutabl ...

  3. Codeforces Gym 100500F Problem F. Door Lock 二分

    Problem F. Door LockTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100500/at ...

  4. [Angular 2] Factory Provider with dependencies

    This lesson discusses when and how to add dependencies, resolved by Angular’s DI, to factory provide ...

  5. hibernate 实体关系映射笔记

    @经常使用属性说明:     @Entity:实体类     @Table:指定相应数据表     @Id:主键,使用能够为null值的类型,假设实体类没有保存到数据库是一个暂时状态     @Col ...

  6. Android 实现书籍翻页效果----完结篇

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...

  7. JavaScipt call和apply用法

    转:http://www.cnblogs.com/wupeng/p/3477879.html Javascript call与apply记录 [注]:记录自己对javascript中call与appl ...

  8. mybatis0211 mybatis和spring整合

    1mybatis和spring整合 1.1 mybaits和spring整合的思路 .让spring管理SqlSessionFactory .让spring管理mapper动态代理对象和dao. 使用 ...

  9. 使用mii-tool设置网卡速率

    转载:http://washion2008.blog.163.com/blog/static/144227201001711537158/ 在ubuntu中,mii-tool 是属于net-tools ...

  10. Eclipse launch failed.Binary not found解决方案

    配置完成后建立工程测试,发现建立Hello World c++ Project类型的项目后可以运行测试,直接建立空项目写个测试类无法运行,提示"launch failed.Binary no ...