伪元素”:after” , “:before"

时间:2022-02-21 00:21:56

伪元素就是源码html中不存在,而视觉上又存在的元素
 

 
  • 简单用法:
blockquote:before {
     content: open-quote;
     // 其他样式
} // 表示在blockquote标签后面添加引号
 
  • 注意点
  1. 插入的内容使用content属性控制;
                    css3 的content属性可以往页面元素里面填写内容;
                    没有内容时要写     content:“”;否则伪元素不显示
                    p:after {
                              content:“我是插在p标签结尾的内容”;
                    }
                    
                    还可以配合attr动态获取content内容;
/* <div data-line="1"></div> */

div[data-line]:after { 
        content: attr(data-line); /* 属性名称上不要加引号!*/
}                                 /* 在div的后面添加了data-line的值 1 ;*/
      2.伪元素缺省状态为inline内联元素,如果要制定宽高需设置display: block;
      3.插入图片最好用background属性 
 

伪元素”:after” , “:before"的更多相关文章

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

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

  2. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  3. CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  4. 浅谈css的伪元素&colon;&colon;after和&colon;&colon;before

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

  5. Effective前端4:尽可能地使用伪元素

    伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...

  6. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  7. 伪元素&colon;&colon;after和&colon;&colon;before

    ::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西).虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示, ...

  8. bootstrap之伪元素

    bootstrap之伪元素 参考地址:http://www.cnblogs.com/keyi/p/5943178.html http://www.runoob.com/css/css-pseudo-e ...

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

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

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

    1.单个颜色实现按钮 hover .active 的明暗变化 请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 .clearfix:a ...

随机推荐

  1. Java(多态)动手动脑

    1> 请看以下"变态"的类(参看示例ParentChildTest.java) 上述代码的特点是: 子类和父类定义了一模一样的字段和方法 运行以下测试代码 1. 上边的程序运 ...

  2. 2016年11月17日--SQL主、外键,子查询

    主键 数据库主键是指表中一个列或列的组合,其值能唯一地标识表中的每一行.这样的一列或多列称为表的主键,通过它可强制表的实体完整性.当创建或更改表时可通过定义 PRIMARY KEY约束来创建主键.一个 ...

  3. Hibernate学习笔记2

    hibernate.cfg.xml文件配置中: <property name="hibernate.hbm2ddl.auto">update</property& ...

  4. iOS 删除NSString中特定字符

    +(NSString *) stringDeleteString:(NSString *)str { NSMutableString *str1 = [NSMutableString stringWi ...

  5. Gas Station &lbrack;leetcode&rsqb; 两个解决方案

    因为gas的总数大于cost总时间.你将能够圈住整个城市. 第一溶液: 如果一開始有足够的油.从位置i出发.到位置k时剩余的油量为L(i,k). 对随意的k.L(i,k)依据i的不同,仅仅相差常数. ...

  6. Java虚拟机-运行时数据区域

    Java虚拟机管理的内存包括如图所示的运行时数据区域: 下面分别进行介绍: 1)程序计数器(Program Counter Register) 占用的内存空间比较小,主要作用就是标识当前线程执行的字节 ...

  7. Asp&period;net并发请求导致的数据重复插入问题

    前段时间工作中,有客户反应了系统中某类待办重复出现两次的情况.我核实了数据之后,分析认为是并发请求下导致的数据不一致性问题,并做了重现.其实这并不是一个需要频繁调用的功能,但是客户连续点击了两次,导致 ...

  8. console&period;log&lpar;&rpar;中的&percnt;d&comma;&percnt;s等代表的输出类型

    在console.log()或console.debug()中输出时会有%d,%s等符号. %s for a String value 字符类型 %d or %i for a Integer valu ...

  9. MVC Razor视图下ViewData传递html内容被转义

    页面输出: html源码: <div style="width: 90%; height: auto;"> <p>付凯航 阿豆 ADOU</p> ...

  10. MATLAB——神经网络sim仿真函数