资讯专栏INFORMATION COLUMN

css中::before和::after的区别

james / 929人阅读

摘要:中和的区别表示法是在中引入的,符号是指伪元素,符号是指伪类支持的浏览器同时也都支持中引入的表示法。语法语法同和都是某标签的兄弟节点异是某标签前的兄弟元素是某标签后的兄弟元素我是在标签前的兄弟元素我是在标签前的兄弟元素我是标签效果如图

css中::before和::after的区别
/* ::after表示法是在CSS 3中引入的,::符号是指伪元素,:符号是指伪类(:hover).
支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。*/
element:after  { style properties }  /* CSS2 语法 */
element::after { style properties }  /* CSS3 语法 */
同:
::before和::after都是某标签的兄弟节点

异:
::before 是某标签前的兄弟元素
::after 是某标签后的兄弟元素
// style
p::before {
  content: "我是在p标签前的兄弟元素"
}
p::after {
  content: "我是在p标签前的兄弟元素"
}

// html

--我是p标签--

效果如图:

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

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

相关文章

  • CSS基础篇-- :before && :after用法,伪类伪元素区别

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

    X_AirDu 评论0 收藏0
  • CSS(一)伪元素巧用

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

    entner 评论0 收藏0
  • 伪元素 ::after ::before 应该这么用(一)

    摘要:伪元素被当做的样式来进行展现,用法和普通的元素用法是一样的。中的伪元素使用个冒号,在中,为了区分伪类和伪元素,规定伪元素使用个冒号。伪元素的特点优点不占用节点,减少节点数。不仅块级元素可以设置伪元素,大部分行级元素也可以。 1 什么是伪元素? CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的。伪元素被当做 CSS ...

    BlackMass 评论0 收藏0
  • CSS开关按钮三例

    摘要:我们将使用纯打造一些切换开关并使其拥有类似于的用户体验。总结这是一个关于一些很好的切换开关示例这种技术使得一切完全复合语义,不会增加任何疯狂的标记,并且用纯就可以完成。获取开关按钮代码可以 我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签,一个checkbo...

    ivan_qhz 评论0 收藏0
  • CSS开关按钮三例

    摘要:我们将使用纯打造一些切换开关并使其拥有类似于的用户体验。总结这是一个关于一些很好的切换开关示例这种技术使得一切完全复合语义,不会增加任何疯狂的标记,并且用纯就可以完成。获取开关按钮代码可以 我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签,一个checkbo...

    longmon 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<