文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

CSS伪元素的基本使用

CSS伪元素的基本使用 上一篇文章介绍了很多个伪类的使用，这篇来说一下伪元素。 伪元素之所以称为“伪”，主要是因为它不是真正网页里的元素，但是标线行为又跟真正网页元素一样，也可以对其使用css操作。...这可以用于在VTT轨道的媒体中使用字幕和其他线索。多使用在视频的文本显示上。...四、::first-letter 修改块级元素的第一行的第一个字母，比如你经常看到故事书中的第一个文字是大写的，就可使用它在页面上做对应的设置 五、::first-line 用在块级元素上的第一行 六、...::selection 应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分） 简单来说就是修改我们用鼠标选中的文字的颜色和背景色 七、::slotted() 用于选定那些被放在 HTML...模板 中的元素，这对于我们现在使用框架而不是再自创标签的用户来说，很少会用到

1.5K00

使用 CSS 伪元素需要注意的

伪元素 ::before，::after 1. 空元素(不能包含内容的元素)不支持 ::before，::after IE 不支持的元素有：img，input，select，textarea。...必须设置 content 属性 若不设置，则伪元素不会显示。如果不想设置 content 的内容，可以将内容设置为空。...如果 content 的值是该元素的某个属性于常量组合而成的，常量仍然要用单引号或双引号括起来,之间不需要加号。如：content: '('attr(title)')';。感觉这种写法好违法直觉。...若 content 的属性值不遵循如上要求，则伪元素不会显示。 4. content 的属性值中如何设置特殊字符？...对内容的开头是符号，或者第一个是英文字母或数字，第二个是符号的，使用 ::first-letter 来设置样式时，会对第一个字母和符号都生效。好违反直觉。

1.3K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    《css大法》之使用伪元素实现超实用的图标库（附源码

    今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力，做出一些脑洞大开的图形。...预备知识 伪元素 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。...伪类 用来表示无法在CSS中轻松或者可靠检测到的某个元素的状态或属性，比如a标签的hover表示鼠标经过的样式，visited表示访问过的链接的样式，更多的用来描述元素状态变化时的样式，伪类主要有： :...伪类和伪元素可以实现很多强大的视觉效果，这里我主要介绍伪元素，如果对伪类或其他css特性感兴趣，可以看看我之前的css文章，写的很全面。...原理 我们实现如上css图标是基于伪元素的，可以利用伪元素的::before和::after和content属性来为元素添加额外视觉效果，我们在上文中也介绍了伪元素的概念和类型，接下来让我们来实现它吧～

    1.4K40

    css面试点三：清除浮动的九中方法-高度塌陷理解-伪元素使用

    缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout 的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 建议：不推荐使用，只建议高度固定的布局时使用 的元素 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏...建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用 Left...:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度 缺点：内部宽高超过父级div时，会出现滚动条。

    1.4K20

    JavaScript学习笔记（四）—— jQuery入门

    简单伪类选择器 伪类选择器 说明 :not(selector) 选择除了某个选择器之外的所有元素 :first或first() 选择某元素的第一个元素 :last或last() 选择某元素的最后一个元素...odd").css("background-color", "#bbbbff"); 子元素伪类选择器 子元素伪类选择器就是选择某一个元素下面的子元素的方式，在jQuery中，子元素伪类选择器分为两大类...属性操作 jQuery提供css()方法，用来获取或设置匹配的元素的一个或多个样式属性。...元素的显示与隐藏 使用hide()方法 使用hide()方法可以隐藏被选元素 $(document).ready(function () { $(".ex .hide...元素的淡入与淡出 使用hide()与show()方法 show和hide方法可以接受参数控制隐藏的过程.: show(speed,callback) speed参数规定显示或隐藏的速度: - slow

    12.4K50

    10 个不错的 CSS 小技巧

    接着，我们会创建一个 :hover 伪类，当用户鼠标移动道元素上时，它将设置 opacity 为 1。 此外，你可以包含自定义的样式。...当 :checked 返回 true 的情况时，我们使用 transform 属性更改状态。 你可以使用这种方法实现各种目标。比如，当用户点点击指定的复选框时候，切花到隐藏其内容。...使用关键帧实现手风琴下拉效果 JavaScript 库，比如 jQuery, Cash 等，即使你想使用一个简单的缩放功能，你都要整个引入。幸运的是，很多 CSS 技巧能够避免这种引入。...使用 first-letter 实现首字母大写 在 CSS 中，可以选择确定的 first-of-type 元素。在这个例子中，我们使用 ::first-letter 伪类去实现首字母大写的效果。...代码片段 最重要的一点，这些 CSS 技巧凸显了不使用 JavaScript 来实现功能的潜力。你可以使用上面这些小技巧，应用在你的设计上。事实上，很多这样的例子可以混合使用，以创作自由风格的设计。

    1.3K10

    能用CSS实现的就不用麻烦JavaScript

    从某种意义上说，它与Flexbox或CSS Grid的工作原理类似，即您需要一个容器元素，在该容器元素上设置scrolln-snap-type和多个为其设置了scroll-snap-align的子元素，...动画 曾经某个时期，大多数开发者使用 JavaScript(或者jQuery) 给浏览器中的元素添加动画。...他们需要更好的工具去开发复杂的动画序列并获得最好的性能。JavaScript(或者jQuery) 并不能够做到。浏览器日渐成熟的同时也开始提供了一些解决方案。最被广泛接受的方案是使用 CSS 动画。...:required  伪类指定具有required 属性的表单元素 :valid  伪类指定一个通过匹配正确的所要求的表单元素 :invalid  伪类指定一个不匹配指定要求的表单元素 [屏幕录制2021... menu在正常态下是隐藏的： .menu{ display: none; } 而当导航hover时显示： ```js /*使用相邻选择器和hover

    1.9K11

    前端基础知识整理

    您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 HTML5声明 HTML网页代码结构 时，浏览器就会自动将焦点转到和标签相关的表单控件上。...2 颜色(Color) 属性 属性 描述 CSS color-profile 允许使用源的颜色配置文件的默认以外的规范 3 opacity 设置一个元素的透明度级别 3 rendering-intent...设置元素的上外边距 1 尺寸(Dimension) 属性 属性 描述 CSS height 设置元素的高度 1 max-height 设置元素的最大高度 2 max-width 设置元素的最大宽度...2 overflow 规定当内容溢出元素框时发生的事情 2 position 规定元素的定位类型 2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移 2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移

    4.6K20

    全栈之前端 | 11.CSS3基础知识之列表链接学习

    cursor 属性 - 设置鼠标指针悬停在元素上的样式 描述: 此属性设置光标的类型（如果有），即在鼠标指针悬停在元素上时显示相应样式。...语法参数: :link CSS 伪类表示尚未被访问的元素，匹配每个具有 href 属性的未访问的 或 元素，注意 :visited 伪类和 :link 伪类是互斥的 :link...:hover CSS 伪类在用户使用指针设备与元素进行交互时匹配，通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。...:focus CSS 伪类表示获得焦点的元素（如表单输）, 即当用户点击或轻触一个元素或使用键盘的 Tab 键选择单表以及链接时，它会被触发。...温馨提示: 由 ::before 和::after 生成的伪元素包含在元素格式框内，因此不能应用在替换元素上，比如 或 元素 语法参数: /* CSS3 语法 */ element

    76310

    jQuery笔记(1) (多图)

    jQuery对象的本质是: 利用$DOM对象包装后产生的对象(伪数组形式存储) 打印box的jQuery对象: 注意: jQuery对象只能使用jQuery方法,DOM对象则使用原生的JavaScript...但是很奇怪吧,我们的jQuery对象是一个伪数组,为什么它能同时给四个box设置背景颜色呢?...隐式迭代(重要) 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代 简单理解: 给匹配到的所有元素进行遍历循环,执行相应的方法,而不用我们再去循环,简化我们的操作,方便我们调用....筛选选择器 :first :even 注意这个和CSS的是不一样的,jQuery的是建立在索引号的基础上的偶数 :eq(index) jQuery筛选方法(重要) parent...狠狠爱了 链式编程 链式编程是为了节省代码量,看起来更优雅 比如我们之前的代码: 我们可以把他简化成这样: jQuery样式操作 操作CSS方法 jQuery可以使用CSS方法来修改简单元素样式

    9.9K10

    7个实用的CSS技巧

    图像文本环绕 CSS 中的 shape-outside 属性是一个非常有用且强大的工具，它允许设计师和开发者控制内容如何围绕一个浮动元素（通常是图像或图形）进行排列。...: 使用元素的边距盒、边框盒、填充盒或内容盒作为参考盒。...一些使用场景包括能够比较两张不同的照片，而无需在视口中渲染这些照片。例如，可以使用光标属性来节省设计中的空间。由于你可以将自定义光标锁定到特定的 div元素上，所以它不会干扰到元素之外的其他元素。...纯CSS的清单 正如我在文章开头提到的，CSS正在稳步发展。而这个动态清单的演示就是一个很好的例证。 它的工作方式是我们将复选框输入类型与 :checked 伪类一起使用。...并使用 transform 属性在 :checked 规范返回真值时更改状态。 使用这种方法可以实现各种各样的目标。例如，当用户点击特定的复选框时，切换隐藏的内容。

    63330

    【CSS】课程网站 网格商品展示 模块制作 ③ ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

    的盒子 , 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行...没有设置高度 , 并且设置了浮动 , 如果不清除浮动 , 后续排列都会出现问题 ; 参考 【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析...) 【CSS】清除浮动 ④ ( 清除浮动 - 使用双伪元素清除浮动 | 代码示例 ) 博客清除浮动 ; 使用 /* 清除浮动 - 使用双伪元素清除浮动 */ .clearfix:before, .clearfix..., 给要清除浮动的 父容器 , 设置 clearfix 样式 ; 二、清除浮动代码示例 ---- 首先 , 在 CSS 样式中 , 定义 使用双伪元素清除浮动 的样式 ; /* 清除浮动 - 使用双伪元素清除浮动...display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } 然后 , 在 HTML 标签结构中 , 标签的上一层父容器中

    1.6K20

    前端页面替换文本的方法和一些小技巧

    html 示例如下： Hide 纯 Javascript/jQuery 实现 使用 Javascript 或者 使用 jQuery...首先，当目标 element 有 on 这个 Class 时，使用 :after 伪元素，给原 element 覆盖上一个新的文本。...纯 CSS 实现 （最近几篇 blog 好像都喜欢给出 纯 CSS 实现哈） 其实，在前端开发中，我们经常使用 :hover 等伪类，通过 CSS 来实现用户鼠标悬浮到某一元素上时，元素样式的修改。...我们可以通过 CSS 配置一个 :checked 伪类的规则。 但是隐藏的 checkbox 也是不可点击的，这里就需要使用 label 标签。...在通过 :checked 和 :after 两个伪类伪元素，在 checkbox 选择上后，绘制一个 "Hide" 元素，覆盖住原有文本。

    2.7K70

    CSS3选择器大全

    建议使用:root方法。 3.CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。...用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用:empty选择器来控制。...8.CSS3 结构性伪类选择器—nth-child(n) :nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。...经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。...14.CSS3选择器 ::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动。

    1K10

    提升CSS技能：深入理解 : 和 ::，让你的选择器更强大

    CSS，即层叠样式表，是一种用于样式和格式化网页的强大语言。当你深入研究CSS时，你可能会遇到在CSS选择器中使用冒号（ : ）和双冒号（ :: ）的情况。...在CSS中，伪类允许我们根据在HTML结构中没有明确定义的条件或状态来选择和样式化元素。...这些条件可以包括用户交互，比如悬停在一个元素上或点击一个链接，甚至可以是存储在浏览器中的信息，比如已访问的链接。 使用伪类，我们使用冒号（ : ）符号将其附加到CSS选择器的末尾。...伪类 :hover 表示鼠标光标位于元素上方的状态。 另一个常用的伪类是 :visited 。它允许我们为用户访问过的链接设置样式。...要探索CSS中可用的伪类的全部范围，你可以参考MDN上的详尽文档。 伪元素（ :: ） 既然我们已经了解了伪类，那么现在让我们把注意力转向伪元素，它们在CSS选择器中用双冒号（ :: ）表示。

    1.1K30

    css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识，关注我微信公众号：全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 鼠标光标属性...（通常是一个问号或一个气球） text 此光标指示文本。...wait 此光标指示程序正忙（通常是一只表或沙漏 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。...3.第三种方式 父容器使用伪类after和zoom。 伪类选择器还没讲过，争取这两天写一份详细的选择器文章。...，元素前后没有换行符*/ display: inline; } 所谓非占位隐藏就是说，使用这个属性后，这个元素是不会被渲染，也就不会被看到。

    1.8K20

    前端成神之路-01_jQuery

    1.2.5. jQuery 对象和 DOM 对象 ​ 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是...$(this).css(“color”,”red”); $(this).siblings(). css(“color”,””); 隐式迭代 // 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代...方法1: 操作 css 方法 ​ jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。 ​...停止动画排队的方法为：stop() ; stop() 方法用于停止动画或效果。 stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。 ​...总结: 每次使用动画之前，先调用 stop() ,在调用动画。 1.5.6. 事件切换 ​ jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。

    13.2K10

    CSS基础（二）

    伪元素 概念：使用CSS模拟标签，创建网页中不重要的图 用法：找父级，在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...默认是行内元素 2. content必须添加，即便是空。否则伪元素不生效。 3. 伪元素在网页中无法通过鼠标直接复制粘贴。...一、链接伪类选择器： :hover  鼠标悬停状态 :visited  鼠标点过之后状态 :link 初始状态 :active 鼠标点击时的状态 例如： 二、焦点伪类选择器： 常用于form表单：...作用：鼠标定位时的状态 input:focus{ background-color: pink; } 三、结构伪类选择器： 作用：通过结构找到目标标签或者文本 匹配父元素中的第...五、显示隐藏 元素本身隐藏 让某元素本身在屏幕中不可见。

    2.5K20

    css实现涂绘文字的效果

    学习来自B站 HTML5+CSS3小实例：文字涂抹动画_哔哩哔哩_bilibili 先看效果: 分析思路 定义好一个div盒子 里面放文本内容 再在div盒子设置伪元素,父级设置position: relative...;,伪元素(子级)设置position: absolute; left: 0; top: 0;实现和div盒子重叠, 通过设置伪元素的宽度,和溢出隐藏overflow:hidden以及文本不换行 white-space...: nowrap;,让他与父级文本保持一致 最后就是实现动画的关键了 也很简单,就是在起始伪元素的宽度为0% ;结束的时候为父级的100% 设置动画时长 速度运动曲线 执行次数 光标是通过给伪元素添加右边框实现的...width: 31px; /* 设置文本不换行 */ white-space: nowrap; /* 超出31px 盒子宽度隐藏...动画名称 动画一次时长 动画速度曲线 无限次播放 */ animation: Move 2.2s linear infinite; /* 利用边框 模光标

    34010
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券