前端之常见的实用伪元素

最新推荐文章于 2024-08-26 04:25:12 发布
最新推荐文章于 2024-08-26 04:25:12 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36625232/article/details/85861075
版权

一丶伪类元素选择器：【类名或者id+：+伪元素】
1.：hover：当鼠标移进去的时候，添加样式
如图“
鼠标在外边：在这里插入图片描述
鼠标进去的时候 ，div 变小 也出现背景颜色

在这里插入图片描述
除了用在div还可以用在文本 等其他地方 学以致用 活学活用 举一反三。
2.：first-line：改变文本第一行的样式在这里插入图片描述
3.：first-letter：改变第一个字的样式 或者第一个字母的样式
在这里插入图片描述
3.：before：在前面插入内容样并且可以修改其样式
在这里插入图片描述
4.：after：在后边插入内容样并且可以修改其样式 跟before差不多

我爱吃秋香螺蛳粉
关注
专栏目录
前端第一阶段-13（伪类、伪元素）
Victory_bad的博客
08-05 248
伪类用来添加一些选择器的特殊效果⚠️a:hover 必须放在 a:link 和 a:visited之后⚠️a:active 必须在 a:hover 之后。 伪类 说明 :hover 鼠标移入 :active 鼠标按下到抬起 a:link 链接访问前 a:visited 链接访问后 伪元素 说明 ::before 在... 前面加 ::after 在... 后面加..................
web前端－CSS 伪元素 －023
helloMr_wo的博客
10-11 515
语法伪元素的语法：selector:pseudo-element {property:value;}CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;}:first-line 伪元素“first-line” 伪元素用于向文本的首行设置特殊样式。 在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第
前端CSS：CSS伪类与伪元素
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-26 851
在Web开发中，CSS伪类与伪元素是非常重要的概念，它们扩展了CSS选择器的功能，使得开发者能够更加精细地控制元素的样式。本文将深入探讨CSS伪类与伪元素的基本概念、作用、以及在实际开发中的应用技巧，并通过丰富的代码示例来帮助读者更好地理解和掌握这些技术点。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。假设我们需要创建一个产品列表，其中每个产品项都包含一个标题和一段描述，当鼠标悬停在产品项上时，产品项的背景颜色会发生变化，并且标题会变粗。
前端之伪类、伪元素
weixin_46372074的博客
03-04 2262
前端之伪类、伪元素伪类、伪元素是选择器？？？伪类？伪类的简单示例 伪类、伪元素是选择器？？？ 选择器的数量众多，使用目的明确。 了解使用方法后查阅列表进行使用。 伪类？ 选择器的一种，用于选择处于特定状态的元素。如： 同类型元素的第一个 鼠标悬浮在元素上 …… 它们的样式会发生改变，就像是应用了一个类。 作用：减少类的使用。 格式：伪类以冒号开头。 伪类的简单示例 ...
前端学习笔记26-伪元素
weixin_45034895的博客
04-21 372
前端学习笔记26-伪元素问题引入::first-letter::first-line::selection::before和::after 问题引入 如果我想把一段文字的第一个字母设置大一点，可以这么写， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
【网页前端】CSS样式表进阶之伪元素
专注于Java领域开发 关注我 带你玩转Java
07-24 933
伪元素：指某个标签内容体的一部分，并非是 HTML 文档中一个真正的完整标签。
CSS中的几个伪元素使用介绍
09-25
今天我们将探讨几个常见的CSS伪元素，以及如何在实际项目中应用它们。 首先，我们要了解两个主要的伪元素：`::before`和`::after`。这两个伪元素分别允许我们在元素内容之前或之后插入内容。通过设置`content`属性...
CSS :befor :after 伪元素的巧妙用法
09-27
3. 进度线：伪元素可以用来创建进度条或时间线效果，通过定位和样式化，可以将简单的线条变得非常美观和实用。 4. 几何图形：通过巧妙地使用CSS的border属性，可以利用伪元素创建各种几何图形，例如矩形、三角形、...
Application-form-With-Psudo-Code:应用程序和伪元素一起使用
05-23
总的来说，将HTML表单与CSS伪元素结合，可以创建出既实用又美观的在线申请表。通过熟练掌握这一技术，开发者可以提高用户体验，使用户更容易理解和交互应用界面，从而提升整体应用程序的质量。在实际项目中，不断...
前端开发常见问题与解决策略
本文档分享了作者在Web前端开发过程中积累的一些关键经验和常见问题，旨在帮助其他开发者避免重复工作，提高开发效率。以下是主要内容概要： 1. **编码选择** - 在处理XML文件时，推荐使用UTF-8编码，因为GB2312...
【前端之旅】CSS三万字总结
孙不坚1208
11-16 2584
一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Jquery、Node.js、Vue、axios、小程序开发（uniapp）以及各种UI组件库、前端框架的学习。 【前端之旅】Web基础与开发工具 【前端之旅】HTML 大总结 CSS 三万字总结一、CSS简介1、什么是CSS2、CSS的好处及作用3、CSS的初体验二、基本用法1、CSS语法模板2、CSS引用方式2.1 行内样式2.2 内部样式2.3 外部样式2.4 引入方式总结3、选择器3.1 标签选择器3.2 .
Web前端——CSS伪类和伪元素
qq_25592087的博客
09-27 1768
可以理解为描述元素的某种状态，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。可以理解为某个元素的子元素，但不存在于html中。用于创建一些不在文档树中的元素，并为其添加样式。标签::伪类{设置的样式，伪类可以与 CSS 类配合使用}标签:伪类{设置的样式，伪类可以与 CSS 类配合使用}
【前端】伪类与伪元素区别
Large_beaR的博客
02-22 980
作为一个后端的开发人员且资历尚且，一直难以找到一个点去区分伪类和伪元素。直到在segmentfault网站上看到一篇相关文章，伪类和伪元素的区别是：伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。文章给出了demo，对于更多的情况会在以后的前端开发中来验证。 至于伪类的效果一定只能通过添加一个实际的类
前端基础-伪类和伪元素
龙骑士-黎明的博客
07-06 466
大家好,我是龙骑士,今天给大家介绍一下前端一个基础内容:伪类和伪元素 伪类和伪元素 伪类:用于定义元素特殊状态 //selector:选择器,pseudo-class:伪类,property:属性,value:属性值 selector:pseudo-class{ property:value; } 锚伪类:连接能够以不同的方式显示 //未访问的连接 a:link{ color:black; }; //已访问的连接 a:visited{ color:gray; }; /
前端必知：23.属性/伪类/伪元素/结构伪类选择器
qq_52799985的博客
07-23 313
通过灵活地运用属性选择器、伪类选择器、伪元素和结构伪类选择器，我们可以实现各种样式的定位和样式的特殊效果。熟练使用这些选择器可以提高开发效率，并帮助我们创造出更加优雅和强大的用户界面。
css伪元素
前端菜鸟
02-04 491
伪元素选择器就像伪类为锚指定幻象类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果。css2.1定义了四个伪元素：设置首字母样式、设置第一行样式、设置之前和之后元素的样式设置首字母样式p:first-letter {}这个规则会选中每一段的第一个字母设置第一行的样式p:first-line {}这个规则会选中每一段所显示的第一行文本设置之前和之后元素的样式假设想设置一种排版效果，在每个h2元
前端中伪元素选择器的使用方法（详解）
趙尒七
03-03 532
伪对象即伪元素，表示DOM外部的某种文档结构。 伪元素改变文档结构，在结构外另加一个没有实际存在的元素（即伪元素）。 伪元素 是行内元素，大小由内容决定 常用伪元素： 1）E:before/E::before 2）E:after/E::after ...
2020 .10.13 web前端 伪元素的运用
qq_48942961的博客
10-13 264
伪元素的运用:直接在css中生成标签,不需要再html中生成,在html中找不到该标签 语法: element::before { centent:’’} element::after{ centent: ‘’} 伪元素生成的是行内元素,不能设置大小 before 是放在element内元素的前面 after 是放在element内元素的后面 伪元素权重为1 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值