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. 配置Windows Update，补丁更新

    配置Windows Update更新下载及安装方式: #NotificationLevel说明: # 0:未配置,不会对当前设置进行更改 # 1:从不检查更新 # 2:检查更新,但是让我选择是否下载和 ...

  2. 从零开始学android开发-通过WebService进行网络编程，使用工具类轻松实现

    相信大家在平常的开发中,对网络的操作用到HTTP协议比较多,通过我们使用Get或者Post的方法调用一个数据接口,然后服务器给我们返回JSON格式的数据,我们解析JSON数据然后展现给用户,相信很多人 ...

  3. 【智能家居篇】wifi在智能家居中的应用

    转载请注明出处:http://blog.csdn.net/Righthek 谢谢! 在设计智能家居系统方案时,一个很关键的point就是组网方式.组网方式关系到整个智能家居系统的稳定性.可扩展性.实时 ...

  4. MFC Windows程序设计源代码免费下载

    本人近期在网上找到了<MFC Windows程序设计>第二版的书内程序的源代码,特意上传CSDN上面,供学习MFC的程序猿们免费下载. 源代码下载: http://download.csd ...

  5. win7重新安装win7

    本方法适用于原本Win7系统下安装,无需U盘,非Ghost,简单几步操作之后与光盘安装过程一样,简便易操作,愿与和我一样有“洁癖”的朋友分享. 1.下载Win7原版光盘镜像,附下载地址: Win7旗舰 ...

  6. javascript面向对象学习笔记——创建对象（转）

    工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o ...

  7. apache vhost 访问权限配置

    apache的<directory>     </directory>语句,查考如下: 如何访问根目录下的目录http://192.168.1.12/test/ 第一．缺省ap ...

  8. zh-cn,zh-tw,en-us,en-gb等网页语言代码一览表

    zh-cn   简体中文zh-tw   繁体中文da-dk   丹麦语nl-nl   荷兰语en-us   英语fi-fi   芬兰语fr-fr   法语de-de   德语it-it   意大利语j ...

  9. linux下 cmatrix的安装和使用

    安装过程 wget http://www.asty.org/cmatrix/dist/cmatrix-1.2a.tar.gztar xvf cmatrix-1.2a.tar.gzcd cmatrix- ...

  10. Ionic中弹窗

    Ionic中弹窗有两种ionicModal和ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用JavaScript设定对话框的一 ...