CSS3 伪元素:before 和 :after 选择器

最新推荐文章于 2024-07-11 21:11:19 发布
最新推荐文章于 2024-07-11 21:11:19 发布
阅读量272 收藏
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hlx20080808/article/details/107492909
版权 
<body>
		<p>Merry Christmas</p>
		<p>way to go</p>
	</body>

 

:after 选择器在被选元素的内容后面插入内容。

	p:after{
				content: "-Yeay,OK!";
				background: coral;
				font:bold 14px/25px;
				display: inline-block;
			}

:before 选择器在被选元素的内容前面插入内容。

p:before{
				content: "台词：";
				width: 40px;
				height: 50px;
				display: inline-block;
				background: mediumorchid;
			}

效果:

 

凌冰_
关注
专栏目录
css 伪类选择器（在元素中插入内容）
PrimaryColor
08-20 1448
作用： :before 选择器在被选元素的内容前面插入内容。 其中的属性： content属性来指定要插入的内容。 W3School示例： p:before { content:"台词：-"; background-color:yellow; color:red; font-weight:bold; }
CSS3 伪元素选择器，例如（E::before、E::after）
03-25
常见伪元素： E::first-letter, 表示给元素中的第一个字母设置一个样式 E::first-line, 表示给元素的第一行设置一个样式 E::before, 用于CSS渲染中向元素逻辑上的头部添加内容，主要是用它开显示修饰的内容，...
浅谈css的伪元素::after和::before
weixin_30702413的博客
11-23 3810
css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 The CSS ::before(::after)pseudo-elementmatches ...
css伪类的使用，::before，p::afte
weixin_30498807的博客
06-11 349
如果你是一个前端开发者,可能知道有一些很好的伪类的改变,比如CSS content属性.如果不熟悉这些概念的,可能需要去复习一篇了. 在这篇文章中.我们主要是看 content属性. CSS的 content 属性需要在 ::before和::after 伪类元素中使用. 属性会在页面上生成content中的内容,当然需要您的浏览器支持这个属性. content 属性的基本语法. conte...
:after和:before的作用及使用方法
weixin_30896763的博客
01-07 4511
1. :before 和 :after 的主要作用是在元素内容前后加上指定内容，示例： HTML代码： <p>你好</p> CSS代码： p:before{ content: 'Hello'; color: red; } p:after{ content: 'Tom'; color: red; } ...
CSS3新增选择器及用法详细介绍
178技术
09-29 3747
目录 CSS属性选择器 E[att^=value]属性选择器 E[att$=value]属性选择器 E[att*=value]属性选择器 CSS3关系选择器 CSS3子代选择器(>) CSS3结构伪类选择器 :root选择器 :not选择器 :only-child选择器 :first-child和:last-child选择器 :nth-child(n)和:nth-last-child(n)选择器 :nth-of-type(n)和:nth-last-of-type(n)选择..
CSS 中的 ::before 和 ::after 伪元素
最新发布
m0_65029152的博客
07-11 3379
本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；
【面试题】 详解css中伪元素::before和::after和创意用法
web全栈开发的博客
11-11 1997
两个伪元素的初始宽度都为0，鼠标滑入的时候，让两个伪元素宽度都变为100%，由于鼠标滑入时我们并不需要第二个伪元素出现，所以这里我们给它的背景颜色设置为透明，这样就可以实现鼠标滑入时只展示第一个伪元素宽度从0到100%的动画，而鼠标移出时第一个伪元素宽度变为0，因为没有过渡效果，所以它的宽度会瞬间变为0，然后展示第二个色块宽度从100%到0的动画效果。，相信大家在工作中都或多或少的用过，但很少有人真的去深入的了解过他们，本文是我对我所知的关于他们用法的一个总结，如有缺漏，欢迎补充。
css的伪元素::after和::before
我的博客
09-23 749
// 转载自：浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。 但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 从定义我们知道::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“conten
css伪元素:before和:after的用法
aliven1的博客
07-03 1514
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。 css有一系列的伪元素，如:before，:after，:first-line，:first-letter等，本文就详述一下:before和:after元素的使
css伪元素:before和:after用法详解
仗剑天涯，从摘要开始
05-19 4807
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。 css有一系列的伪元素，如:before，:after，:first-line，:first-letter等，本文就详述一下:before和:after元素的使
那些你所不知的CSS ::before 和::after 伪元素用法
09-22
这两个伪元素在CSS3中被正式定义，以区分伪元素（`::before`和`::after`）与伪类（`:before`和`:after`），尽管大多数现代浏览器仍支持单冒号的写法，但推荐使用双冒号以遵循标准。 ### 1. 基本语法 `::before`在...
CSS伪元素before、after设置特殊效果:制作时尚焦点图相框
09-25
在网页设计中，CSS伪元素before和after非常强大且实用，它们允许我们在选定元素的内容之前或之后插入内容。这使得我们可以通过CSS来创建一些额外的视觉效果，而无需使用额外的HTML标记或图片。通过这种方式，设计师...
HTML5&CSS3网页制作：伪元素选择器.pptx
06-01
CSS3 中的 `:before` 和 `:after` 伪元素选择器提供了这样的功能。 1. `:before` 选择器： `:before` 伪元素选择器允许我们在元素的内容前面插入内容。例如，如果我们想在一个段落前添加一个引号，可以这样编写CSS...
CSS 实现鼠标悬停上弹出二级菜单（一）
分享我的点点滴滴，在成长路上与你同行！
09-08 6618
效果: HTML页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; display: flex; ..
HTML5 页面缩放出现混乱
分享我的点点滴滴，在成长路上与你同行！
09-08 3756
使用鼠标放大缩小页面时，就会出现页面混乱： 解决： （1）使用百分比，可以兼容大部分浏览器,必须加一个相对定位！ （2）使用响应式布局，可以使用框架哦！ <link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/> 效果： ...
CSS3 创建圆角边框及矩形添加阴影
分享我的点点滴滴，在成长路上与你同行！
04-07 3051
一、nth-of-type(n) 第N个子元素 二、border-radius 圆角 三、box-shadow 阴影 index.html页面 /* 圆角 */ div{ width:200px; height:100px; background:#F93; border:2px solid gray; /*
CSS 实现鼠标悬停上弹出二级菜单动画显示（二）
分享我的点点滴滴，在成长路上与你同行！
09-08 1495
效果： HMTL页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 去掉小黑点 */ ul{ list-style: none; } /* 隐藏 */ ul>li ul{ display: none.
CSS3 box-shadow阴影效果详解
分享我的点点滴滴，在成长路上与你同行！
02-18 1465
     在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果，并且可以设置多组效果，每组参数值用逗号隔开。如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0，将模糊值blur也设置为0，此时增加扩张半径，就会使元素的投影变为实线边框。这样就可以模拟多边框效果了，首先看下box-shadow语法和参数。 http://www.runo...
CSS伪元素:before和:after实战应用与对话框样式设计
在这个关于CSS选择器技巧的文章中，我们首先了解了两个重要的伪元素`:before`和`:after`。`:before`用于在元素内容之前插入内容，而`:after`则是在元素内容之后插入。例如，在提供的代码示例中，`<style>`标签内的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值