信息
- 外文名
- Pseudo object language
- 又 称
- 伪元素
- 中文名
- 伪对象语言
伪对象语言伪对象语言
伪对象用于将特殊的效果添加到某些选择器。其语法为：选择器：伪元素{属性：值}
[1]
CSS中的伪对象如表1：
-
jQuery修改CSS伪元素属性的方法
2020-10-25 14:47:39CSS伪元素不是DOM元素，因此你无法直接选择到它们。下面与大家分享两种不错的修改方法，需要的朋友可以参考下 -
使用CSS伪元素实现文字部分变色的方法
2020-12-13 11:29:15这里就需要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符，只显示半个，而原字符显示另外一半，最后把它们拼成一个字。CSS Code ... -
CSS利用伪元素实现导航栏斜线分隔
2020-09-24 23:14:12主要介绍了CSS利用伪元素实现导航栏斜线分隔的相关资料 -
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2020-10-24 14:14:40主要介绍了JavaScript获取伪元素(Pseudo-Element)属性的方法技巧,本文直接给出实现代码,需要的朋友可以参考下 -
CSS伪元素 :before, :after, box-shadow应用
2020-12-12 17:20:14利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子： 1、利用 :before 和 :after 添加背景，比如给一段文字前后打引号... -
css3 transitions和伪元素制作4种超酷鼠标经过hover动
2019-12-13 09:25:39一款使用css3 transitions和伪元素制作的4种鼠标经过hover动画效果，4种鼠标经过hover动画效果分别是：滴水效果，圆心放大，旋转放大和飞翔的独眼怪。 -
利用CSS3伪元素实现逐渐发光的方格边框
2020-09-24 20:08:01主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。 -
给before和after伪元素设置js效果的方法
2020-10-23 05:31:28本文通过实例给大家介绍给before和after伪元素设置js效果的方法，对js伪元素相关知识感兴趣的朋友一起学习吧 -
纯css3before和after伪元素结合animation鼠标悬停动画效果
2019-09-14 14:22:26纯css3before和after伪元素结合animation鼠标悬停动画效果 -
详解CSS 伪元素及Content 属性
2020-12-11 06:42:20初识伪元素 说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。那这时我不禁地想问：“直接添加两个class为.before和.... -
css3 伪元素和伪类选择器详解
2020-09-25 02:23:47无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。 -
使用CSS伪元素控制连续几个元素的样式方法
2021-01-22 10:41:44用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式，网上有许多博客都说了如何去控制一个的改变，但是我在实际写的过程中，发现更多时候是需要控制多个连续元素的改变。 使用伪元素去控制（以:hover为例），... -
CSS :befor :after 伪元素的巧妙用法
2020-12-12 18:10:13本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景，如填充文本、作为iconfont、进度线、时间线以及几何图形。 1. 介绍 1.1 说明 CSS中的:befor、:after都会创建一个伪元素，其中:befor创建的伪元素是所选... -
tailwindcss-pseudo-elements:TailwindCSS插件，添加伪元素的变体-源码
2021-03-07 16:27:05TailwindCSS插件，添加伪元素的变体（ ::before ， ::after ， ::first-letter等）。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-pseudo-elements -D 配置 const... -
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020-11-21 19:41:09结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-... -
父元素的高度为0利用伪元素:after清除浮动可解决问题
2020-09-25 02:20:01浮动布局会导致父元素的高度为0，在未设置高度的情况下，不会根据子元素的高度而变化，所以一定要设置clear属性，用伪元素 :after 来代替这个空白标签 -
CSS伪元素before、after设置特殊效果:制作时尚焦点图相框
2020-12-13 18:53:04:befor、:after是CSS的伪元素，什么是伪元素呢？伪元素用于向某些选择器设置特殊效果。 我们用CSS手册可以查询到其基本的用法： E:before/E::before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和... -
CSS中的几个伪元素使用介绍
2020-09-25 04:11:17今天我们来说几个CSS中的伪元素,它们在项目开发中用的并不多,但确实很有用，下面有个不错的示例，大家可以感受下 -
利用CSS伪元素创建带三角形的提示框的实现方法
2020-09-24 20:58:27下面小编就为大家带来一篇利用CSS伪元素创建带三角形的提示框的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 -
第13章css伪类与伪元素.ppt
2020-03-31 21:38:4308网络工程--- 网页制作 LOGO 第 13 章 css 伪类与伪元素 主要内容 伪类语法 锚伪类 firs-child 伪类与 lang 伪类 伪元素的语法与使用 13.1 伪类语法 选择器伪类 { 属性值} 选择器.类伪类 { 属性值} a.two:link {... -
【CSS基础学习】伪类选择器，伪元素选择器，交集选择器
2021-01-08 11:01:56伪类选择器和伪元素选择器可以为文档中非具体存在的结果指定样式，或者为某些元素（包括文档本身）的状态指定样式，它会根据某种条件而非文档结构应用样式。 伪类选择器的使用方法如下： HTML标记 伪类名{伪类名：... -
[CSS] 用伪元素:after实现分割线和气泡
2016-05-31 11:17:09用伪元素:after实现分割线和气泡 -
CSS3网页设计与制作(1-5)：伪类/伪元素/优先级规则/服务器字体
2021-06-20 18:07:33CSS3规范并不是独立的，它重复了CSS的部分内容，但在其基础上进行了很多的增补与修改。...本课程是《CSS3网页设计与制作》系列课程的1-5章内容，主要包含基本选择器、伪类、伪元素、优先级规则、服务器字体等知识点 -
CSS伪元素 利用伪元素为input输入框添加图标 伪元素before的垂直居中
2021-01-29 21:27:35目录标题伪类和伪元素封装一个有前缀和后缀的input输入框总结参考 伪类和伪元素 伪类专门用来表示元素的一种特殊的状态。比如：访问过的链接，普通的链接，获取焦点文本框 伪元素表示元素中的一些特殊的位置。比如:...展开全文伪类和伪元素
- 伪类专门用来表示元素的一种特殊的状态。比如：访问过的链接，普通的链接，获取焦点文本框
- 伪元素表示元素中的一些特殊的位置。比如::before表示元素最前面的部分
- CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
- 在CSS3中，通过::创建伪元素，通过:选中伪类。浏览器也接收将::before写做:before
封装一个有前缀和后缀的input输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .my_input { position: relative; width: 180px; } .my_input_inner { /* input输入框默认的display就是inline-block */ /* 设置box-sizing */ box-sizing: border-box; /* 宽度为100% */ width: 100%; height: 40px; /* 设置输入框的边框颜色 */ border: 1px solid orange; /* 设置outline为none，否则在input状态为focus时会有外边框 */ outline: none; /* 设置输入框的背景颜色 */ background-color: gray; /* 设置输入框的圆角 */ border-radius: 10px; /* 设置光标以及文本的颜色 */ color: yellowgreen; font-size: inherit; /* 设置左右内边距为30px 用于展示图标 */ padding: 0 30px; transition: border-color .2s cubic-bezier(.645,.045,.355,1); } .my_input_inner:focus { /* 设置input状态为focus时的边框颜色 */ border: 1px solid red; } .my_input_suffix { /* 开启绝对定位 */ position: absolute; /* 确定位置 */ right: 5px; /* 设置高度 */ /* 高度为百分比 当前元素的position为absolute 所以它的包含块是离它最近的position的值不是static的祖先元素的内边距区域 所以百分比是相对于div.my_input的内容区高度而言 */ height: 100%; top: 0; text-align: center; transition: all .3s; pointer-events: none; } .my_input_suffix_icon { /* 设置display为inline-block */ display: inline-block; /* 设置宽度 */ width: 25px; /* 设置高度 */ /* 高度为百分比 当前元素的position为static 所以它的包含块是离它最近的祖先块元素 也就是span.my_input_suffix 所以百分比是相对于span.my_input_suffix的内容区高度而言 */ height: 40px; /* 设置行高和 */ /* 设置line-height为40px 内部元素会在line-height中居中 这样就能呈现视觉上的垂直居中 */ line-height: 40px; /* 设置行内的内容水平居中 */ text-align: center; } .my_input_suffix_icon:before { color: pink; font-style: normal; content: 'X'; } .my_input_preffix { position: absolute; left: 5px; height: 100%; top: 0; text-align: center; transition: all .3s; pointer-events: none; } .my_input_preffix_icon { display: inline-block; width: 25px; height: 40px; /* 这里我们换一种垂直对齐方式 */ /* 这里不设置line-height */ /* line-height: 40px; */ text-align: center; } .my_input_preffix_icon:before { color: pink; /* 设置高度 */ height: 100%; /* 通过flex来垂直对齐before中的内容 */ display: flex; align-items: center; font-style: normal; content: 'X'; } </style> </head> <body> <div class="my_input"> <input type="text" class="my_input_inner"> <span class="my_input_suffix"> <i class="my_input_suffix_icon"></i> </span> <span class="my_input_preffix"> <i class="my_input_preffix_icon"></i> </span> </div> </body> </html>
总结
上面的例子，我们将伪元素垂直居中了，输入框前缀的X采用的是line-height来设置的垂直居中方式。输入框后缀的X采用的是flex来设置的垂直居中方式。
前缀：设置i标签中的伪元素before和input输入框的高度一样高，并且设置伪元素的line-height和input输入框的高度一样高，那么文本就会在before伪元素中垂直居中，也就是在input中垂直居中了。
后缀：设置i标签的display属性为flex，并设置内容垂直居中。那么before伪元素就会在i标签中垂直居中，before伪元素没有设置高度，高度有文本X撑开的。
更多居中方案参考博客：css水平居中方案 垂直居中方案 块级/内联元素居中方案
参考
参考博客：https://www.cnblogs.com/mycoke/p/6056187.html
参考博客：https://www.itranslater.com/qa/details/2582556896884425728
收藏数
190,866
精华内容
76,346