教你玩转CSS 伪元素_51CTO博客_css伪元素

教你玩转CSS 伪元素

关注 孙叫兽杂谈

教你玩转CSS 伪元素

原创

孙叫兽杂谈 2021-06-18 11:09:29 ©著作权

文章标签 CSS教程 前端开发 网页布局 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者孙叫兽杂谈的原创作品，请联系作者获取转载授权，否则将追究法律责任

目录

 

CSS 伪元素

语法

:first-line 伪元素

:first-letter 伪元素

伪元素和CSS类

多个伪元素

CSS - :before 伪元素

  • 赞
  • 收藏
  • 评论
  • 分享
  • 举报

上一篇：教你玩转CSS 导航栏

下一篇：教你玩转CSS 伪类

提问和评论都可以，用心的回复会被更多人看到 评论
发布评论
全部评论 () 最热 最新
相关文章
  • css flex 子元素溢出时，父元素被撑开解决方案

    当父元素使用flex: 1;自适应填满时，子元素内容溢出，父元素内容撑大，导致页面显示问题，或设置了overflow 为scroll 的元素没出现滚动条等问题解决方案：1.如果是横向排列，flex: 1;的元素加上width: 0; 此时会限制自适应的父元素不会溢出。2.同上，如果是纵向排列，flex: 1;的元素是高度铺满的，那就加上height: 0; 则元素高度自适应的同事，高度不会被撑大。
    自适应 高度自适应 宽高
  • 【CSS浮动属性】别再纠结布局了！一文带你玩转CSS Float属性

    在网页设计的世界里，CSS浮动属性（float）就像一把双刃剑。它能够让元素脱离文档流，实现灵活的布局，但如果处理不当，也可能引发一系列布局问题。今天，我们就来深入探讨这把“剑”的正确使用方法，让你的页面布局既美观又稳定。一、什么是CSS浮动属性浮动属性是CSS中的一个定位属性，它允许元素脱离文档流，并向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边缘。简单来说，它就像是让元素
    文档流 CSS 侧边栏
  • 【Web前端】CSS 中的图像、媒体和表单元素

    web开发中，图像、媒体和表单元素是构建用户界面的重要组成部分。正确地使用 CSS 来处理这些元素可以大幅提高用户体验，增强页面的美观性和功能性。
    html web css css3 前端
  • 【CSS】CSS 伪类和伪元素

    1. 什么是伪类和伪元素？2. 伪类和伪元素的使用场景？3. CSS3中的伪类和伪元素属性描述
    css js html 伪元素 选择器
  • 教你玩转CSS 尺寸 (Dimension)

    目录所有CSS 尺寸 (Dimension)属性CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。所有CSS 尺寸 (Dimension)属性
    Dimension 尺寸 css 行间距
  • 教你玩转CSS padding（填充）

    padding（填充）当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。可能的值填充- 单边内边距属性在CSS中，它可以指定不同的侧面不同的填充： padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;上内边距是 25px 右内边距是 5
    CSS教程 前端开发 网页布局
  • 教你玩转CSS 媒体类型

    目录CSS 媒体类型媒体类型@media 规则其他媒体类型CSS 媒体类型媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。媒体类型一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上..
    CSS教程 前端开发 网页布局
  • 教你玩转CSS 伪元素

    一、CSS 伪元素CSS伪元素是用来添加一些选择器的特殊效果。语法伪元素的语法：selector:pseudo-element {property:value;}CSS类也可以使用伪元素：    selector.class:pseudo-element {property:value;}  1.:first-line 伪元素“first-line” 伪元素用于向文本的首行设置特殊样式。在下面的例
    CSS 伪元素
  • 教你玩转CSS 伪类

    CSS伪类是用来添加一些选择器的特殊效果。语法：伪类的语法:    selector:pseudo-class {property:value;} CSS类也可以使用伪类：    selector.class:pseudo-class {property:value;} 1.anchor伪类在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示    a:link {color:#FF0
    CSS 伪类
  • 教你玩转CSS Overflow

    教你玩转CSS OverflowCSS 布局 - OverflowCSS overflow 属性用于控制内容溢出元素框时显示的方式。    <style>        #overflowTest {background: #4CAF50;color: white;padding: 15px;width: 80%;height: 100px;overflow: scroll;bord
    CSS Overflow
  • 教你玩转CSS 居中

    1.元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配：     .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px;    }  注意: 如果没有设置 width
    CSS
  • jquery伪元素 css伪元素

    文章目录前言css伪元素一. 作用二.列举2.1"::first-line"2.2“::fist-letter”2.3"::before"2.4 "::after"伪元素2.5"::selection"伪元素总结 前言在某些时刻，可以给你的元素增加你想要的内容，或者呈现出你想要的样式，那么我们就唠唠CSS中的伪元素，话不多说，走起~~~css伪元素一. 作用用于设置元素指定部分的样式，如 ”af
    jquery伪元素 css 前端 html 伪元素
  • CSS伪元素

    我是中国人 数学和物理是一对孪生兄弟，彼此不分家，所以爱因斯坦数学指定不会差。 据外媒报道称，诺贝尔奖官方近日公布了著名物理学家爱因斯坦的数学成绩，以此来回击那些质疑爱因斯坦数学不好的声音。 诺贝尔官方公布的是，爱... ...
    伪元素
  • 教你玩转CSS border(边框)

    教你玩转CSS border(边框)边框样式边框样式属性指定要显示什么样的边界。border-style属性用来定义边框的样式 border-style的值代码演示：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="
    CSS border
  • jquery 伪元素内容 css伪元素

    1. 伪元素概念CSS 在渲染文档的时候，伪元素可以通过 css 给 HTML 添加一个元素（叫标签也行），这个元素在文档树中是找不到的。伪元素被当做 CSS 的样式来进行展现，用法和普通的元素用法是一样的。2. 伪元素特点优点：不占用 DOM 节点，减少 DOM 节点数。让 CSS 帮助解决了一部分 JavaScript 问题，简化了开发。避免增加毫无意义的页面元素。缺点：不利于调试。伪元素不真
    jquery 伪元素内容 html css css3 伪元素
  • 教你玩转CSS表格（table）

    教你玩转CSS表格（table）1.表格边框指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框：    table, th, td {border: 1px solid black;    }请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框，使用 border-collapse属性。2.折叠边框bo
    CSS table
  • 教你玩转CSS 导航栏

    CSS 导航栏垂直 水平 一、导航栏熟练使用导航栏，对于任何网站都非常重要。使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。导航栏=链接列表作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：    <ul>      <l
    CSS 导航栏
  • 教你玩转CSS Float（浮动）

    什么是 CSS Float（浮动）？CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。元素怎样浮动元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果
    CSS Float
  • 教你玩转CSS Position(定位)

    CSS Position(定位)position 属性指定了元素的定位类型。position 属性的五个值：staticrelativefixedabsolutesticky元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。1.static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
    CSS Position
  • CSS（14）CSS 伪元素

    CSS伪元素 伪元素是用来添加一些选择器的特殊效果。 伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。 所有CSS元素 ...
    伪元素 css 选择器 块级元素 首字母
  • 脚本的write echo

    script是什么意思？script释义：　n.剧本；脚本；手稿；手迹；字体；考卷读音：英[skrɪpt] 美[skrɪpt]　　单词变形：1、过去式:scripted2、过去分词:scripted3、现在分词:scripting4、第三人称单数:scripts双语例句：Thescriptwon'tplaywell.那个剧本不适于在舞台上演出。扩展资料：近义词1、screenplay　　
    脚本的write echo javascript 开发语言 ecmascript vue.js
  • python 如何构造一个数据通信帧

    「@Author：Runsen」TCP/IP计算机与网络设备两情侣要谈恋爱，相互通信，那么双方就必须有规则。基于相同的方法，不同的硬件、操作系统之间的通信，都需要一种规则。而我们就把这种规则称为协议(protocol)。TCP/IP 是互联网相关各类协议族的总称。TCP/IP是指TCP和IP这两种协议。TCP/IP是在IP协议的通信过程中，使用到的协议族的统称。TCP/IP协议族按层次分别为 应用
    python 如何构造一个数据通信帧 网络 socket python java
  • resttemplate 压测缓慢

    查看结果树对 https://ceshiren.com/t/topic/1369.json 发起请求1、增加线程组、HTTP Request、添加结果树，配置协议、域名、请求地址，如下图所示：请求结果如下图所示：响应结果默认的是text文本格式（1）第一种方式：正则表达式过滤：#配置id的数据的正则表达式： "id":.*?.（2）第二种方式：json表达式过滤：#json表达式 .post_
    resttemplate 压测缓慢 jmeter json 前端 nginx
  • Python字符串逐个比较

    6、Slicing slicing切片，按照一定条件从列表或者元组中取出部分元素（比如特定范围、索引、分割值） s = ’ hello ’ s = s[:] print(s) hello s = ’ hello ’ s = s[3:8] print(s) hello 7、strip() strip()方法用于移除字符串头尾指定的字符（默认为空格或换行符）或字符序列。 s = ’ hello '.s
    Python字符串逐个比较 python 开发语言 Python 字符串
  • jeesite菜单全部在顶部展示

     导入到Eclipse1、检出JeeSite4源代码：git clone https://gitee.com/thinkgem/jeesite4.git2、拷贝web文件夹，到你的工作目录（不包含中文和空格的目录）下，重命名为你的工程名，如：jeesite-demo3、打开pom.xml文件，修改第13行，artifactId为你的工程名，如：<artifactId>jees
    jeesite菜单全部在顶部展示 java web开发 jeesite 初始化
孙叫兽杂谈
    关注
    分类列表
    • # 前端系列1篇
    • # APICloud系列13篇
    • # 高级java教程系列3篇
    精品课程领资料
    免费资料>

    2024软考
    高级 中级 初级

    华为认证
    数通 云计算 安全

    厂商认证
    K8s Oracle 红帽

    IT技术
    数据库 网络安全 AIGC
    近期文章
    • 1.29.图解鸿蒙之线性布局-自适应延伸
    • 2.28.图解鸿蒙之线性布局-自适应缩放-使用百分比设置
    • 3.深入了解 SopCast：P2P 流媒体播放与直播工具
    • 4.听说 CISSP 是顶级的信息安全证书？真的吗？
    • 5.食用动物益生素行业数据分析报告2025-恒州诚思
    新人福利
    • 意见
      反馈
    • 训练营训练营

    举报文章

    请选择举报类型

    内容侵权 涉嫌营销 内容抄袭 违法信息 其他

    具体原因

    包含不真实信息 涉及个人隐私

    原文链接（必填）

    补充说明

    0/200

    上传截图

    格式支持JPEG/PNG/JPG，图片不超过1.9M

    已经收到您得举报信息，我们会尽快审核
    • 赞
    • 收藏
    • 评论
    • 分享
    如有误判或任何疑问，可联系 「小助手微信：cto51cto」申诉及反馈。
    我知道了
    51CTO首页
    AI.x社区
    博客
    学堂
    精品班
    软考社区
    免费课
    企业培训
    鸿蒙开发者社区
    WOT技术大会
    IT证书
    公众号矩阵
    移动端
    短视频 免费课程 课程排行 直播课 软考学堂
    全部课程 厂商认证 IT技术 25年5月软考 PMP项目管理 免费题库
    在线学习
    文章 资源 问答 课堂 专栏 直播
    51CTO
    鸿蒙开发者社区
    51CTO技术栈
    51CTO官微
    51CTO学堂
    51CTO博客
    CTO训练营
    鸿蒙开发者社区订阅号
    51CTO软考
    51CTO学堂APP
    51CTO学堂企业版APP
    鸿蒙开发者社区视频号
    51CTO软考题库
    51CTO博客

    51CTO博客

    • 首页
    • 关注
    • 排行榜
    • 精品课程升职加薪
    • 免费资料领资料
    • 软考题库软考题库
      软考题库
      科目全、试题精、讲解专业，扫码免费刷
    • 搜索历史 清空
      热门搜索
      查看【 】的结果
    • 写文章
    • 创作中心
    • 登录注册
    51CTO博客

    Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号

    关于我们
    官方博客 全部文章 热门标签 班级博客
    了解我们 网站地图 意见反馈
    友情链接
    鸿蒙开发者社区 51CTO学堂
    51CTO 软考资讯