在CSS中有一特性允许我们添加额外元素而不扰乱文档本身，就是伪元素。

下面举例说明：

html:

<blockquote>
 　　blockquote只是一个块引用
</blockquote>

css：

blockquote::before{
　　content:open-quote;
}
blockquote::after{
　　content:close-quote;
}

效果:

理解伪元素 :before和:after的更多相关文章

  1. 理解伪元素 :Before 和 :After

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...

  2. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  3. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  4. 理解css伪类和伪元素

    伪类就是可以通过直接添加一个类样式达到同等效果,而伪元素,则需要先添加一个元素,然后在元素上添加样式才能达到同等效果 伪类 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的 ...

  5. 对html标签 元素 以及css伪类和伪元素的理解

    标签:这应该都知道.<br/> .<a>.<p></p> 等都是标签. 元素:标签开始到结束.比如:<p>p之间的内容</p> ...

  6. CSS中的before和:after伪元素深入理解

    1.定义: “伪元素”,顾名思义.就是它创建了一个虚假的元素,并且将其虚假的元素插入到目标元素的内容之前或之后. 2:特点: a.它在实际文档中不改变什么,但是对用户可见,可以通过css控制,源码中看 ...

  7. 理解:Before和:After伪元素

    CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...

  8. 理解 CSS 中的伪元素 :before 和 :after

    CSS 的主要目的是给 HTML 元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上 CSS 中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你一定 ...

  9. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

随机推荐

  1. 解决Cannot find MySQL header files under /usr/include/mysql的错误

    按照下面的步骤能成功,亲测.转帖,做笔记 编译php-5.5-6的mysql支持,出现Cannot find MySQL header files under /usr/include/mysql. ...

  2. java高薪之路__006_多线程

    线程的创建有两种方式 package learn.JavaBasics.Class; public class ThreadDemo extends Thread { private static i ...

  3. STM32学习笔记(七) ADC模数转换测电平(普通和DMA模式)

    嵌入式系统在微控制领域(温度,湿度,压力检测,四轴飞行器)中占据着重要地位,这些功能的实现是由微处理器cpu(如stm32)和传感器以及控制器共同完成的,而连接他们,使它们能够互相正常交流的正是本小节 ...

  4. http://stackoverflow.com/questions/6065169/requestanimationframe-with-this-keyword

    Observe that you call obj.draw as : <button onclick="obj.draw() The first time obj.draw is c ...

  5. UI里的UIActionSheet按钮

    1.效果图:分别为有短信分享                                      无短信分享 -(void)viewDidLoad{ //添加按钮 UIButton *share ...

  6. spring mvc拦截器和<mvc:annotation-driven />的详解

    MVC的拦截器 经本人在Spring mvc中对方案1和方案2的测试表明,并没有拦截静态资源,所以可以放心使用方案1和方案2,方案3可以放弃,并且可以放心使用<mvc:annotation-dr ...

  7. JAVA中怎么处理高并发的情况

    一.背景综述 并发就是可以使用多个线程或进程,同时处理(就是并发)不同的操作. 高并发的时候就是有很多用户在访问,导致系统数据不正确.糗事数据的现象.对于一些大型网站,比如门户网站,在面对大量用户访问 ...

  8. ITPUB网站的知识索引汇总

    1. ITPUB知识索引树 http://www.itpub.net/tree/ http://www.itpub.net/pubtree/index.htm 2. ITPUB知识索引贴——全文索引 ...

  9. IT公司100题-28-整数的二进制表示中1的个数

    问题描述: 输入一个整数n,求n的二进制表示中,一共有多少个1.例如n=8,二进制表示为00001000,二进制表示中有1个1.     分析: 如果一个数n不为0,那么n-1的二进制表示,与n的二进 ...

  10. OC中intValue要注意的地方

    在程序中,发现一个问题,写了个例子,如下:         NSDictionary * dict = [[NSDictionary alloc] init];        NSString * s ...