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. C#中使用UDP通信

    UDP通信是无连接通信,客户端在发送数据前无需与服务器端建立连接,即使服务器端不在线也可以发送,但是不能保证服务器端可以收到数据. 服务器端代码: static void Main(string[]  ...

  2. delphi label1 文字在窗体上水平来回移动

    //文字在窗体上水平来回移动 procedure TForm1.Timer1Timer(Sender: TObject);{ Timer1.Interval:=10;}begin  if label1 ...

  3. iOS开发——UI_swift篇&TableView实现页眉和页脚

    TableView实现页眉和页脚   在UItableView中header和footer是很常见的,而且他能让你实现很复杂的功能,我们见过最多的就是下拉刷新和上啦加载更多,当然你还可以在上面添加一个 ...

  4. Playing with ptrace, Part II

    Playing with ptrace, Part II Issue From Issue # December Dec , By Pradeep Padala inSysAdmin In Part ...

  5. Sublime Text 3 常用快捷键总结

    1.快速跳转到某一行:Ctrl+G,输入行号,可以快速跳转到该行 2.快速查找:Ctrl+P 输入"@函数名"可以快速查找到函数 输入"#+文本" 3.多行游标 ...

  6. 115 Java Interview Questions and Answers – The ULTIMATE List--reference

    In this tutorial we will discuss about different types of questions that can be used in a Java inter ...

  7. __asm__ __volatile__("": : :"memory");

    参考:http://stackoverflow.com/questions/14950614/working-of-asm-volatile-memory asmvolatile("&quo ...

  8. Android（java）学习笔记91：泛型接口的概述和使用

    package cn.itcast_06; /* * 泛型接口:把泛型定义在接口上 */ public interface Inter<T> { public abstract void ...

  9. Emacs 安装 jedi

    Jedi 是个很棒的 python 的自动补全插件,可以显示 docstring, function arguments and code location. 安装步骤: 一.安装 python 的虚 ...

  10. android-partition分析

    转载请注明来源:cuixiaolei的技术博客 这里讲下android的分区.具体的使用在另一片文章中介绍,这里只是把它拿出来介绍. android的存储分为两种 一种叫做RAM,如emmc标准的dd ...