在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. 关于JS的数据类型的一些见解

    关于js里的数据类型这块,说下个人对它的一些见地 js中的数据类型可以归类两类, 简单数据类型:string,number,boolean,null,undefined 复杂数据类型:object 其 ...

  2. java练习题（字符串类）：显示4位验证码、输出年月日、从XML中抓取信息

    1.显示4位验证码 注:大小写字母.数字混合 public static void main(String[] args) { String s="abcdefghijklmnopqrstu ...

  3. static（静态、修饰符）

    static(静态.修饰符) static修饰成员变量时:static修饰成员变量时,那么该成员变量的数据就是一个共享的数据. 静态成员变量的访问方式: 方式一: 使用对象进行访问. 对象.属性名 方 ...

  4. Maven 工程错误Failure to transfer org.codehaus.plexus:plexus-io:pom:1.0,Failure to transfer org.codehaus.plexus:plexus-archiver:jar:2.0.1

    原本好好的Maven工程却出现了莫名的错误 Failure to transfer org.codehaus.plexus:plexus-archiver:jar:2.0.1 from http:// ...

  5. 【ubuntu】系统设置打不开

    如果系统设置打不开,请重新安装gnome-control-centersudo apt-get install gnome-control-center如果设置里只有很少的几个图标请重新安装unity ...

  6. 习题-任务2初始ASP.NET MVC项目开发

    一.选择题 1.在ASP.NET MVC项目的RouteConfig.cs文件中,(    )方法注册了默认的路由配置. A.RegisterMap    B.RegisterRoutes    C. ...

  7. 如何有效使用Project（2）——进度计划的执行与监控

    继上次的的<编制进度计划.保存基准>继续讲解如何对计划进行执行和监控. 计划执行即:反馈实际进度.反馈工作消耗(本文只考虑工时,不考虑成本).提出计划变更请求.如果你的企业实施了专门的PM ...

  8. 51nod 1459 迷宫游戏(dij)

    题目链接:51nod 1459 迷宫游戏 dij裸题. #include<cstdio> #include<cstring> #include<algorithm> ...

  9. <转>浏览器内核分类

    浏览器的种类成千上百,但所基于的内核,却没有几个.目前主流的浏览器内核主要为以下四种: 一.Trident内核,代表产品Internet Explorer说起Trident,很多人都会感到陌生,但提起 ...

  10. CentOS7下ifconfig command not found

    执行命令 yum install net-tools