在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. jQuery核心之 $

    参考jQuery官网API文档 $ 和 $() 的区别很重要: 1.$(document).ready() 和 $(document).load() 的 区别:     前者等到DOM准备好了之后就会 ...

  2. 关于Dagger 2 的使用方式

    什么是Dagger2 Dagger是为Android和Java平台提供的一个完全静态的,在编译时进行依赖注入的框架,原来是由Square公司维护,现在由Google维护. 我们知道Dagger是一个依 ...

  3. svn查看代码作者的命令

    svn blame **.java | grep ** svn查看代码作者的命令

  4. [Git] 怎么使用Git让代码回到以前的某个节点

    我们可以使某个文件回到以前的某个节点,也可以使整个文件夹下面的文件都回到以前的某个节点,下面只介绍某个文件的,全部的类似. 按步骤操作完成后本地你选中的文件会变成红色,此时的代码还是原来的代码,但是G ...

  5. CSS权重及样式优先级问题

    CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择 ...

  6. HTML5基本元素初探

    最近看了一些HTML5的基础知识,写了一些小案例,记录一下,方便查找. 1.新建的HTML5页面中显著的变化是:DOCTYPE声明变简洁(<!DOCTYPE html>) / <me ...

  7. Windows下搭建Git开发环境

    Windows下搭建Git开发环境主要有以下三种方法: 1,VS,vs2013和vs2015中已经集成了git插件了 2,msysGit+TortoiseGit 3,msysGit+SourceTre ...

  8. stopPropagation, preventDefault 和 return false

    e.stopPropagation()此方法用于阻止事件冒泡或者事件捕获.IE8及以下中没有此方法,使用e.cancelBubble=false 来阻止事件冒泡. 当标准W3C中,事件包括捕获阶段和冒 ...

  9. 使用Jsoup 抓取页面的数据

    需要使用的是jsoup-1.7.3.jar包   如果需要看文档我下载请借一步到官网:http://jsoup.org/ 这里贴一下我用到的 Java工程的测试代码 package com.javen ...

  10. android-Okhttp初步使用

    自从谷歌把android的请求框架换成Okhttp后,android开发人员对其的讨论就变的越来越火热,所有咱作为一枚吊丝android程序员,也不能太落后,所以拿来自己研究一下,虽然目前项目开发用的 ...