在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. (转) linux之sort用法

    sort命令是帮我们依据不同的数据类型进行排序,其语法及常用参数格式: sort [-bcfMnrtk][源文件][-o 输出文件] 补充说明:sort可针对文本文件的内容,以行为单位来排序. 参 数 ...

  2. JQuery的概述

    一.什么是 jQuery 1.jQuery是一个JavaScript库,jQuery 极大地简化了 JavaScript 编程.它通过封装原生的JavaScript函数得到一整套定义好的方法. 2.它 ...

  3. Workspace defines a VM that does not contain a valid jre/lib/rt.jar: C:\Program Files\Java\jre7

    Maven编译时两则信息 (Workspace以及default classpath container) 博客分类: Java   使用Maven一年有余,却总是被两则不起眼的编译信息困扰,终想查明 ...

  4. html中button自动提交表单？

    在ie中,button默认的type是button,而其他浏览器和W3C标准中button默认的属性都是submit

  5. vue服务端渲染

    这篇文章写得还蛮好https://segmentfault.com/a/1190000006701796 从官方网站下载了例子看,用es6写的,还好之前看过es6不然都看不懂,正好es6的东西一起熟悉 ...

  6. 基于天天动听API开发在线音乐查询网站

    预览图 源码下载 地址:https://github.com/bajdcc/dev/tree/master/ttpod 文件夹说明: App_Code,WCF服务 Script,离线下载的celery ...

  7. SSM框架学习之高并发秒杀业务--笔记4-- web层

    在前面几节中已经完成了service层和dao层,到目前为止只是后端的设计与编写,这节就要设计到前端的设计了.下面开始总结下这个秒杀业务前端有哪些要点: 1. 前端页面的流程 首先是列表页,点某个商品 ...

  8. JSON.parse()和JSON.stringify()的区别

    1. parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age": ...

  9. PHP 每天的总结（1）

    今天写博客的心情比以往还要糟糕,因为........................(完结). 1.获取某输入框的值,有两中获取方式,GET和POST .前者  没有为顾客的账户安全着想.而后者返之: ...

  10. curl请求的时候总是提示400

    今天用curl测试一个接口,一直提示400 最后发现是url的问题,如下处理就可以了 $url = str_replace(' ', '+', $url);