【CSS】伪元素

已于 2024-04-01 22:17:47 修改
阅读量356 收藏
点赞数 3
分类专栏： CSS基础 文章标签： css 前端
于 2024-03-29 08:29:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kakaai77/article/details/137131219
版权

伪元素

  • 常见的伪元素
    • ::first-line
    • ::first-letter
    • ::before 在元素第一个子元素前增加内容
    • ::after 在元素最后一个子元素后增加内容
  • 为了区分伪类和伪元素，建议伪元素都使用2个冒号
  • ::first-line可以针对首行文本设置属性
  • ::first-letter可以针首字母设置属性
  • ::before 在一个元素前插件元素
  • ::after 在一个元素后插入元素
春风十里不如你I
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS伪元素实现边框
jsjdguo的博客
05-11 1178
1. ::after { content: ""; width: 100%; height: 1px; background: #eee; -webkit-transform: scale(1, 0.5); -ms-transform: scale(1, 0.5); -o-transform: scale(1, 0.5); transform: scale(1, 0.5); -webkit-transform-origin: 0 0;...
css伪元素覆盖,CSS :befor :after 伪元素的巧妙用法
weixin_34696129的博客
08-04 1585
本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景，如填充文本、作为iconfont、进度线、时间线以及几何图形。1. 介绍1.1 说明CSS中的:befor、:after都会创建一个伪元素，其中:befor创建的伪元素是所选元素的第一个子元素，:after创建的伪元素是所选元素的最后一个子元素。:befor、:after创建的伪元素默认样式为内联样式。1.2 语法/* CS...
CSS伪元素
XueBeiBei的专栏
11-24 1341
css伪元素简介
css伪元素实现下划线
weixin_44727080的博客
03-18 4174
前言： css伪元素实现下划线效果，用一个border-bottom+伪元素实现双重下划线效果 效果图： 实现代码： .titleT{ position: relative; font-size: 28px; width: 112px; height: 44px; line-height: 40px; text-align: center; border-bottom:2px solid #5A8...
css 伪元素居中对齐
HCL_world的博客
01-03 921
【代码】css 伪元素居中对齐。
CSS 伪元素
黑木令之佛性
06-17 5959
css 伪元素 之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步，无以至千里, 戒焦戒躁 。 好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结， 意在总结连贯提炼为一个系统的前端 CSS
CSS伪元素选择器
super码力的博客
06-15 5591
伪元素选择器有::first-letter，::first-line，::selection，::before，::after
CSS伪元素插入文字
weixin_44706441的博客
11-28 1312
当项目中需要给UI组件中的元素插入文字时，可以使用伪元素插入文字，调整样式此处使用:after伪元素来插入文字。
CSS伪元素详解以及伪元素与伪类的区别
郊眠寺
03-15 1014
以上代码，使用了多个伪元素的实现。
css中什么是伪元素,CSS伪元素是什么？
weixin_28733933的博客
08-04 1670
什么?伪元素?之前不是说了伪类吗，怎么又跑出来一个伪元素吗?它们不是一样的吗?呵呵，其实伪类和伪元素是两个不同的概念，今天小编就为大家介绍一下伪元素。一、什么是伪元素css伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。二、语法伪元素的语法：selector:pseudo-element{property:value;}标签：伪元素{性质:值;}CSS类也可以...
CSS 伪元素
12-14
CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法： selector:pseudo-element {property:value;} CSS类也可以使用伪元素： selector.class:pseudo-element {property:value;} :first-line 伪元素 ...
css伪元素 长方体 css伪元素 长方体
06-25
css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...
CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与:before
09-25
CSS伪元素：before和after伪元素的使用和应用 CSS中的伪元素（Pseudo Element）是一种特殊的HTML元素，用于在文档树中添加虚拟元素，以便实现特定的样式或布局效果。在CSS中，有两种常用的伪元素：:before和:after...
CSS伪元素：after：before的特殊用法demo
06-19
综上所述，CSS伪元素`:after`和`:before`是强大的工具，能够帮助开发者在不破坏HTML结构的前提下，实现各种创意和功能。通过熟练掌握和灵活运用这些伪元素，我们可以创建出更加丰富、互动性和用户体验良好的网页。在...
利用CSS伪元素创建带三角形的提示框的实现方法
01-19
CSS伪元素非常有用，它提供了一种无需多余的DOM元素来实现一些常见的功能的方法，以下利用其实现一个带三角形的tooltip。 下面是DOM结构：下面是对应的CSS样式： XML/HTML Code复制内容到剪贴板  bottom>  ...
CSS 尺寸 (Dimension)
最新发布
lly202406的博客
09-05 373
CSS 尺寸属性是控制网页布局的关键。通过理解并有效使用这些属性，您可以创建既美观又。
CSS行元素的截断样式box-decoration-break属性，有点儿意思！
流绪@微梦
09-03 571
在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。常用行内元素：a、span、i、em、strong、img等。
使用 SCSS 或 LESS 相比于纯 CSS 的好处
Chloeeeeeeee的博客
09-04 937
SCSS 和 LESS 作为 CSS 预处理器，提供了更多的编程功能，使得样式代码更加简洁、灵活和可维护。虽然现代 CSS 也在不断引入新特性（如 CSS 变量、网格布局等），但 SCSS/LESS 在复杂项目中依然具有明显的优势。
css spacing设置间距
时间不说谎
09-03 321
将在每个单词之间增加30像素的间距。这个属性可以增加或减少字与字之间的空白，并且允许负值，即减少字与字之间的间距。将在每个字母之间增加10像素的间距。这个属性会影响一个单词中每个字母之间的间距，使得单词中的字母之间也有空白。属性用于设置单词之间的间距。它只影响英文单词之间的间距，对中文无效。属性用于设置字母之间的间距，适用于中文和英文。
CSS伪元素与Content属性深度解析
CSS伪元素是网页设计师手中的有力工具，熟练掌握它们的用法和`Content`属性，能帮助提升页面的美观性和功能性，同时也能优化代码结构和性能。通过本文提供的实例和指导，读者可以更好地理解和应用这些CSS特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值