您现在的位置是：网站首页> 编程资料编程资料
那些你所不知的CSS ::before 和::after 伪元素用法_心得技巧_网页制作_
2021-09-11
981人已围观
简介 下面小编就为大家带来一篇那些你所不知的CSS ::before 和::after 伪元素用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。
Creative Button Styles
一 基本语法
在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：
- p:before {}
不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老的浏览器可能会存在支持问题，不过伪元素大多是配合 CSS3 使用，就无所谓向下兼容了：
- img::after {}
这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以下几个值：
•[String] - 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：
- •a:after { content: "
相关内容
- css前端知识点总结(必看篇)_心得技巧_网页制作_
- 符合w3c标准的html标准需要注意的地方详解_心得技巧_网页制作_
- 深入理解HTML5在移动开发方面的发展现状_心得技巧_网页制作_
- 浅谈HTML5与HTML4的10个关键区别_心得技巧_网页制作_
- 网站前端性能优化之javascript和css篇_心得技巧_网页制作_
- 关于服务器返回的十四种常见HTTP状态码详解_心得技巧_网页制作_
- 如何在网页制作中给网页字体文件增加矢量图标_心得技巧_网页制作_
- z-index为负值的元素无法点击到的解决方法_心得技巧_网页制作_
- The Complete List of MIME Types(比较完整的MIME类型一览表)_心得技巧_网页制作_
- 什么是 MIME TYPE MIME-Types类型集合_心得技巧_网页制作_
