`

:before伪元素和:after伪元素

    博客分类:
  • css
 
阅读更多
:before 伪元素在元素之前添加内容。
:after 伪元素在元素之后添加内容。

这两个伪元素允许创作人员在元素内容的最前面或者最后面插入生成内容。
默认行内元素,可以使用属性 display 改变。
【需要与content属性一起使用,为源文档中不存在的内容设置样式的】

<h3>If you can do what you do best and be happy, you're further along in life than most people.</h3> 
<p>只要能把自己的事做好,并让自己快乐,你就领先于大多数人了。</p> 

h3:before{ content: "原文:"}  
p:after{color:blue;content: "【翻译】";} 

结果展示:

  • 大小: 23.2 KB
分享到:
评论

相关推荐

    HTML5&CSS3网页制作:伪元素选择器.pptx

    CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :after选择器 :before选择器 描述 :before伪元素选择器用于在被选元素的内容前面插入内容。 语法格式 E:before{ content:文字/url...

    CSS伪元素:after:before的特殊用法demo

    伪元素实现tooltip,nav导航栏的炫酷效果以及计数器

    CSS :befor :after 伪元素的巧妙用法

    本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景,如填充文本、作为iconfont、进度线、时间线以及几何图形。...CSS3引入了 ::(两个冒号)是用来区分伪类(:一个冒号)和伪元素(::两个冒号)。

    CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与:before

    CSS伪元素(Pseudo Element):after与:before 估计大家很少用到这些 ,但是在技术飞速发展的现在,我觉得我们不能整天把时间浪费在兼容IE6上! 先看一下:after与:before甚模样: HTML中只有一个P标签,P里面有一行文字...

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

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

    CSS伪类:before在元素之前 :after 在元素之后实例讲解

    :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。 :after 伪元素在元素之后添加内容 这个伪元素...

    CSS3中伪元素::before和::after的用法示例

    众所周知::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。 一、与普通...

    CSS3 伪元素选择器,例如(E::before、E::after)

    常见伪元素: E::first-letter, 表示给元素中的第一个字母设置一个样式 E::first-line, 表示给元素的第一行设置一个样式 E::before, 用于CSS渲染中向元素逻辑上的头部添加内容,主要是用它开显示修饰的内容,...

    那些你所不知的CSS ::before 和::after 伪元素用法

    下面小编就为大家带来一篇那些你所不知的CSS ::before 和::after 伪元素用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    CSS中的before和:after伪元素使用详解

    如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注。特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元素。 Nicolas Gallagher使用伪...

    CSS伪元素 :before, :after, box-shadow应用

    利用CSS伪元素 :before 和 :after 可以在文档前后插入内容而不改变文档原有结构,再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子: 1、利用 :before 和 :after 添加背景,比如给一段文字前后打引号...

    纯css3before和after伪元素结合animation鼠标悬停动画效果

    纯css3before和after伪元素结合animation鼠标悬停动画效果

    JS控制伪元素的方法汇总

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素。...譬如::before和::after伪元素,用于在CSS渲染中向元素的头部或尾部插入内容,它们不受文档约束,也不影响文档本身,只影响最终样式。这些添加的

    程序员表白神器 HTML+CSS实现《跳动的心》

    首先,创建一个div元素,并为其...将.heart::before伪元素向上偏移50像素(或者你的.heart::before高度的一半),将.heart::after伪元素向右偏移50像素。 最后,使用@keyframes定义一个名为heartbeat的动画让心动起来!

    CSS中灵活使用:before和:after

    :before是css中的一种伪元素,可用于在某个元素之前插入某些内容。:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。 下面我们先跑个简单的代码测试下效果: CSS Code复制内容到剪贴板 &lt;style&gt;...

Global site tag (gtag.js) - Google Analytics