伪元素 before after

刘东发布于2019-08-30 12:48 / 2134人阅读

摘要：用途伪元素和用于一个给定元素的前面或者后面添加文字或者图片。这些添加不会改变文档的内容，不会出现在结构中，不可复制，仅仅在渲染层加入。

用途

伪元素 ::before  和 ::after 用于一个给定元素的前面或者后面添加文字或者图片。
这些添加不会改变文档的内容，不会出现在dom结构中，不可复制，仅仅在css渲染层加入。

基本语法

 element ::before {}
 兼容写法：element：before{}  //ie8 仅支持 单冒号的写法 
 a:before { content: "↗"; }

相关属性：

content

    使用引号包括一段字符串，将会向元素内容中添加字符串
   如果仅仅是配合样式属性做出效果，content属性也不能为空，即：content:""

attr():

   调用当前元素的属性，比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来
  a:after { content:"(" attr(href) ")"; }

url() / uri() – 用于引用媒体文件
h1::before { content: url(logo.png); }

兼容

1、火狐对 input 的伪元素不支付
2、ie 9 、10 、11 对伪元素的line-hight 不兼容 rem单位
3、有些浏览器不能对伪元素使用transitions 或 animations 动画

利用伪元素和动画实现的创意链接特效：http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-1

云服务器 GPU云服务器伪元素获取伪元素 before before_request

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115074.html

详解 CSS 属性 - :before && :after

摘要：现在我们经常在源码中看到如下的写法这里的和就是我们今天来探讨的伪元素之二。举例说明在这里我们给伪元素添加了属性，并赋值为。这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为是无效的。现在我们经常在 html 源码中看到如下的写法： showImg(http://segmentfault.com/img/bVb9y2); 这里的 ::after 和 ::before 就是...

plokmju88 2019-08-28 17:51 评论0 收藏0
详解 CSS 属性 - :before && :after

摘要：现在我们经常在源码中看到如下的写法这里的和就是我们今天来探讨的伪元素之二。举例说明在这里我们给伪元素添加了属性，并赋值为。这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为是无效的。现在我们经常在 html 源码中看到如下的写法： showImg(http://segmentfault.com/img/bVb9y2); 这里的 ::after 和 ::before 就是...

CoderBear 2019-08-01 14:36 评论0 收藏0
css伪元素（before与after）

摘要：最近因为一些网页的需要，比较深入的使用了的伪元素，发现原来不只是用用或而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。最近因为一些网页的需要，比较深入的使用了CSS的伪元素（Pseudo Element），发现原来不只是用用before或after而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。什么是伪元素？伪元素之所以称...

mo0n1andin 2019-08-29 18:38 评论0 收藏0
CSS基础篇-- :before && :after的用法，伪类和伪元素的区别

摘要：一的用法如同对伪元素的名称一样，是用来给指定的元素的内容前面插入新的内容。二伪类和伪元素的区别伪类种类伪元素种类伪类作用对象是整个元素例如尽管这些条件不是基于的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，等等。一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .b...

X_AirDu 2019-08-28 18:15 评论0 收藏0
CSS（一）伪元素的巧用

摘要：并且，一些伪元素可以使开发者获取到不存在于源文档中的内容比如常见的还可以为伪元素定制样式。。中新增加的伪元素必须用伪类使用一个冒号例如。就本文而言，我们将把我们探讨的范围限制在和这两个伪元素的巧用上。作为一门前端er,你肯定熟知 a:hover a:visited.....我还记得在小本本上记着诀窍：love 与 hate 纠缠不休,大家都懂的吧。。。。伪类和...

entner 2019-08-30 15:53 评论0 收藏0