css中伪类 :before和:after

最新推荐文章于 2024-07-11 21:11:19 发布

jinuxm

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量507

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/jinuxm/article/details/52877801

版权

前端专栏收录该内容

6 篇文章

订阅专栏

早就知道:before和:after的作用，在实际工作中也用了很多次，但是今天看到一个教程中的一句话才知道原来我理解错了

比如，div:after这个伪类，我一直以为是在div这个元素的节点后面添加一个伪类，其实不是这样子滴。。。。。。

其实是往div这个元素的子元素的最后添加一个伪类，相应的div:before就是在div这个元素的子元素最前边添加了一个伪类哦。

偶然看到的，不知道自己理解的对还是不对。。。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jinuxm

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 CSS 选择器::after和::before的简单使用

03-29

前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。...

CSS伪类:before在元素之前 :after 在元素之后实例讲解

09-25

特别地，CSS伪类中的`:before`和`:after`是生成内容的伪元素，它们能够在元素内容的前面或后面动态地添加额外的元素，让网页表现更加丰富和灵活。 ### CSS伪类:before和:after的基本概念 `:before`和`:after`被...

参与评论您还未登录，请先登录后发表或查看评论

CSS伪类:before 和 :after

weixin_33922672的博客

04-14

503

CSS用了许久，对一些伪类熟视无睹，从不想着去搞清楚一下。比如说这个 :before :after 其实，:before 表示该标记前面的样式，反之 :after 代表设置后面的样式。网页上常常看到有些文字前或后有小图标，用的就是这种样式：对应的代码有： <button type="button" class="btn text" onclick="...

认识伪类元素:before和:after

weixin_30653023的博客

09-12

441

起因于不理解下图点的写法，后来发现是个很基础的东西运用了伪类元素:before，如下注意，他的css写法也是非常简洁高效的。查阅了些关于伪类before和after的知识帮助理解，以下摘自：http://www.hulufei.com/post/about-before-and-after-pseudo-element :before...

::before和::after伪元素的用法

平平爱学习的博客

02-01

1048

一、介绍 css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部

css的伪元素::after和::before

我的博客

09-23

843

// 转载自：浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。一、概念： 1.定义从定义我们知道::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“conten

CSS 中的 ::before 和 ::after 伪元素

最新发布

m0_65029152的博客

07-11

1万+

本文主要记录CSS中的 ::before 和 ::after 伪元素的相关内容和使用场景；

CSS3中伪元素::before和::after的用法示例

01-21

众所周知::before与::after两个伪元素其实是CSS3中的内容，然而实际上在CSS2中就已经有了这两者的身影，只不过CSS2中是前面加一个冒号来表示（:before和:after）。今天主要讲讲这两个伪元素该如何使用。一、与普通...

CSS3 :before和:after伪类的用法

web_hxx的博客

07-08

1445

什么是伪类？伪类用于定义元素的特殊状态。例如，它可用于：当用户将鼠标悬停在元素上时为其设置样式访问和未访问的链接不同样式在获得焦点时设置元素的样式伪类的语法后代选择器匹配作为指定元素后代的所有元素。以下示例选择<div>元素内的所有<p>元素：选择器:伪类 { 属性:值; } 链接可以以不同方式显示： /* 未访问的链接 ...

css伪元素:before和:after用法详解

zjliwhf的博客

07-07

5480

css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。 css有一系列的伪元素，如:before

CSS之伪类和伪元素 | :before和::before

weixin_42479421的博客

09-26

1321

伪元素选择器，:before和::before单冒号和双冒号有何关联？

CSS之伪元素 ::before

平平无奇小码农的博客

01-22

8093

这里写目录标题1、伪元素不设置display：block，也不设置宽高2、伪元素设置display：block，不设置宽高2、伪元素设置display：block，设置宽高 1、伪元素不设置display：block，也不设置宽高 <style> .div6 { width: 200px; height: 100px; margin: 100px; background-color: yellow; } .d

CSS——伪元素&:before

samn_aa的博客

03-12

5041

content从定义我们知道::before和::after匹配一个虚拟元素，主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性，默认是内联元素。其实::after和::before被引入css中，最核心的目的，还是为了实现语义化。在我们实际开发时候经常有这样的经历，为了实现一些效果，在文档中创建了一些没有实际内容的节点，或者加入辅助样式的文本.

CSS伪类对象before和after的用法

mylove

08-05

598

博客已经迁移至萌萌的IT人，谢谢支持 -------------------------------------------------- 一直感觉这两个伪类对象不是很重要，并且IE对它两兄弟并不支持，所以也没有怎么静下心来研究，只有在清楚浮动clearfix的时候会用到哈，其他都很少用！不过最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很...

css伪元素详解

weixin_30888027的博客

03-15

396

css伪类和伪元素的前世今生，:before和::before傻傻分不清！

xiaokangyingrui的博客

03-07

488

css伪类和伪元素的前世今生，:before和::before傻傻分不清！善用工具也善洞悉本质

css伪类before和after原理与使用（原）

lihfqq的博客

10-11

769

伪类before和after用于在被选元素的内容前面或后面插入内容。请使用 content 属性来指定要插入的内容。（只能插入内容）可以设置所插入内容的样式。直接上代码： div {width:200px; border:1px solid #000; line-height:50px; margin:10px;} .after,.before {border:1px ...

css的伪类before的使用

平凡之路

04-08

700

css before和after伪类的一些用法