您现在的位置是：网站首页> 编程资料编程资料

CSS中:before和:after伪元素使用的奇技淫巧

2021-09-05 959人已围观

简介 :before和:after伪元素在CSS中除了被用来添加元素、加小标、清浮动等,还有很多妙用之处,接下来我们就来看一两个CSS中:before和:after伪元素使用的奇技淫巧

CSS 有两个说不上常用的伪类 :before 和 :after，偶尔会被人用来添加些自定义格式什么的，但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面，里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外，就是接下来要介绍的这两个伪元素了。
2016520120938738.gif (461×186)

一 基本语法
在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：

CSS Code复制内容到剪贴板
  1. p:before  {}  

不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老的浏览器可能会存在支持问题，不过伪元素大多是配合 CSS3 使用，就无所谓向下兼容了：

CSS Code复制内容到剪贴板
  1. img::after {}  

这两个伪类下特有的属性 content ，用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。比较有用的是以下几个值：

[String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：

CSS Code复制内容到剪贴板
  1. a:after { content: "

上一篇：使用CSS绘制基础的对话框图案的代码示例CSS3中设置3D变形的transform-style属性详解css 元素选择器的简单实例css border属性的使用方法和技巧css sprite简单实例CSS3中的Transition过度与Animation动画属性使用要点CSS中:before和:after伪元素使用的奇技淫巧CSS凹型导航按钮效果的实现代码CSS3 magic带64种动画库特效源码CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

下一篇：CSS3中的Transition过度与Animation动画属性使用要点CSS3中Transform动画属性用法详解 CSS3中Transition动画属性用法详解 CSS3中Animation动画属性用法详解 深入理解css属性的选择对动画性能的影响jQuery利用CSS3的keyframes属性实现飞翔的小鸟动画特效CSS3 steps属性制作僵尸行Sprite动画特效源码css动画属性使用及实例代码(transition/transform/animation)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网