首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

伪元素之前和之后的CSS在Edge和IE 11中不起作用

伪元素是CSS中的一种特殊选择器,用于在元素的内容之前或之后插入额外的样式。在Edge和IE 11浏览器中,伪元素之前和之后的CSS可能不起作用的原因是这些浏览器对CSS规范的支持程度较低,存在一些兼容性问题。

为了解决这个问题,可以尝试以下方法:

  1. 使用其他选择器:如果伪元素之前和之后的CSS在Edge和IE 11中不起作用,可以尝试使用其他选择器来实现相同的效果。例如,可以使用类选择器或ID选择器来选择目标元素,并通过添加额外的HTML元素或使用JavaScript来插入所需的样式。
  2. 使用JavaScript或jQuery:如果需要在Edge和IE 11中实现伪元素之前和之后的CSS效果,可以使用JavaScript或jQuery来动态地添加所需的样式。通过操作DOM,可以在目标元素之前或之后插入新的元素,并为这些元素应用所需的样式。
  3. 使用特定的CSS hack:在某些情况下,可以使用特定的CSS hack来解决伪元素之前和之后的CSS在Edge和IE 11中不起作用的问题。这些hack可能是特定于浏览器的,因此需要谨慎使用,并且可能会影响到其他浏览器的兼容性。

需要注意的是,以上方法仅适用于解决伪元素之前和之后的CSS在Edge和IE 11中不起作用的问题,并不能保证在所有情况下都能完全解决兼容性问题。在实际开发中,建议进行兼容性测试,并根据实际情况选择合适的解决方案。

关于伪元素和CSS的更多信息,可以参考腾讯云的CSS文档:CSS文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS元素

定义 CSS 类 是添加到选择器关键字,指定要选择元素特殊状态。 例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮颜色。.../* 所有用户指针悬停按钮 */ button:hover { color: blue; } 类存在意义是为了通过选择器,格式化DOM树以外信息以及不能被常规CSS选择器获取到信息。...,而且还允许你根据诸如像导航历史这样外部因素来应用样式(例如 :visited),同样,可以根据内容状态(例如在一些表单元素 :checked),或者鼠标的位置(例如 :hover 让你知道是否鼠标一个元素上悬浮... 如果想要给该段落第一个字母添加样式,可以第一个字母中包裹一个元素,并设置该span元素样式: Hello World, and...总结 1.类本质上是为了弥补常规CSS选择器不足,以便获取到更多信息; 2.元素本质上是创建了一个有内容虚拟容器; 3.CSS3中元素语法不同; 4.可以同时使用多个类,而只能同时使用一个元素

2.8K10

解析CSS元素常见用法实例

常见用法实例解析 CSS元素是一种特殊类型选择器,可以用于元素状态或者文档树中特定位置添加样式。它们允许开发者选择一个元素部分或者元素部分状态,从而改变它们样式。...]:checked { background-color: lightgray; } 以上就是CSS元素常见用法实例,它们为开发者提供了更多样式控制选项,可以特定状态下或位置应用特定样式...元素常见用法实例解析 ::before元素 ::before元素用于某个元素内容前面插入一个元素,并为其设置样式。比如,我们可以段落前面添加一个标签,并为其设置样式。...after元素 ::after元素用于某个元素内容后面插入一个元素,并为其设置样式。比如,我们可以段落后面添加一个标签,并为其设置样式。...本文深入探讨了CSS元素常见用法实例解析,并附上了具体代码示例。通过合理运用元素,我们可以更灵活地控制页面的样式,实现更丰富交互效果视觉效果。

14110

CSS3元素特性区别

前端er们大都或多或少地接触过CSS元素,比如最常见:focus,:hover以及标签:link、visited等,元素较常见比如:before、:after等。...其实上面提到这些元素都是CSS1CSS2中概念,CSS1CSS2中对元素区别比较模糊,甚至经常有同行将:before、:after称为类。...类 - pseudo classes 首先看看CSS2中对定义: CSS 类用于向某些选择器添加特殊效果。 单单看定义完全不懂讲什么。...使用两个冒号::是为了区别元素CSS2中并没有区别)。当然,考虑到兼容性,CSS2中已存元素仍然可以使用一个冒号:语法,但是CSS3中新增元素必须使用两个冒号::。...最后,总结一下类与元素特性及其区别: 类本质上是为了弥补常规CSS选择器不足,以便获取到更多信息; 元素本质上是创建了一个有内容虚拟容器; CSS3中元素语法不同; 可以同时使用多个

1K90

提升CSS技巧::is(), :where(), :has()元素运用

快来免费体验ChatGpt plus版本,我们出钱 体验地址:https://chat.waixingyun.cn/#/home :is()、:where() :has() 元素CSS 中用于样式化元素非常强大工具...它们是 CSS 选择器 Level 4 规范中引入。它们允许我们将样式应用于符合特定条件任何元素,例如元素类型、元素位置元素后代。...例如,如果你想要定位所有类名以 bold 开头元素,可以使用 :where()类来实现: 将以下类添加到上述CSS文件中,将导致任何具有以 bold 开头CSS元素渲染为粗体。...: 元素 :is() :where() 看起来在做同样事情。...important; } 这是我们网页现在样子: 这些新元素是任何CSS技能集中不可或缺工具。经过一些练习,你将能够自信地自己项目中使用它们。

17530

2分钟带你搞懂CSS元素区别

相信很多CSS新手对元素这两个一直分不太清,MDN文档说太官方也读不明白,那么就让我带你用2分钟事件分清元素!...一.类 1.定义:MDN中对定义 感兴趣可以看看,不过不一定能看懂 2.类种类: 3.类小例子:类小例子 二.元素 1.定义:MDN中对元素定义 2.元素种类:...3.元素小例子:元素小例子 三.区别 这里以类 :first-child 元素 :first-letter 为例。...: red} hello world 我们发现如果我们不用类的话,要想实现预期效果就要手动已有的元素添加一个类...三.总结 这下再看官方定义不就清楚明白多了,这俩区别是如果不用元素写样式,前者想要选中某个目标不需要新加元素标签,后者需要。

29110

CSS3元素特性及两者区别

前端工作者肯定或多或少地接触过CSS元素,比如最常见:focus,:hover以及标签:link、visited等,元素较常见比如:before、:after等。...其实上面提到这些元素都是CSS1CSS2中概念,CSS1CSS2中对元素区别比较模糊,甚至经常有同行将:before、:after称为类。...CSS3对这两个概念做了相对较清晰地概念,并且语法上也很明显讲二者区别开。 类 - pseudo classes 首先看看CSS2中对定义: CSS 类用于向某些选择器添加特殊效果。...使用两个冒号::是为了区别元素CSS2中并没有区别)。当然,考虑到兼容性,CSS2中已存元素仍然可以使用一个冒号:语法,但是CSS3中新增元素必须使用两个冒号::。...最后,总结一下类与元素特性及其区别: 类本质上是为了弥补常规CSS选择器不足,以便获取到更多信息; 元素本质上是创建了一个有内容虚拟容器; CSS3中元素语法不同; 可以同时使用多个

69420

CSS-自定义高度元素背景图如何自适应以及afterie处理

于是就有了这个问题如下一连串问题。 .最外层父元素{height:auto;background:url(.....本来想用css3background-image属性多个背景图功能,可是想想还要兼容ie就很烦 于是利用了css类选择器来完成这一巨大使命。...可以看出来,beforeafter背景图片没有加载进来,或者可以说,ie(以下皆指ie8及以下)中,beforeafter没起作用。 ?...开发人员工具也打不开,打开了是透明. 百度了下,找到了解决方法,下面是原文摘录: “按下F12之后,开发人员工具桌面上看不到,但是任务栏里有显示。...但我觉得最好方法还是用css好,不过针对ie类不能用问题,网上还是有很多教程说明,让引入js文件来解决。 1 .class{background:url(..

1.3K80

css选择器攻略

css3选择器分类 css3选择器最新版本中作为一个独立模块分离了出来,而css选择器有哪些呢?又该如何分类,请看下图。 ?...,e~f 之后所有,卡可以选择多个;后面三个兼容ie7+ 目标类选择器 e:target 针对连接到部分,兼容ie9+ 动态类 :linked,:visited,:active,:hover...,:focus 其中activefocus 兼容8+支持 语言类 :lang(en)可以针对不同语言,兼容ie8+ ui元素状态类 :checked,:enabled,:disabled ,...(n),:root,:only-child,:empty ,等,兼容ie9+ 否定类 :not() 针对性排除,兼容ie9+ 元素 元素规范中为双冒号,为了区别类,ie6-8只识别单冒号...整体建议还是不要为了使用新选择器而使用,要找到对应使用场景,多使用基本选择器能避免低版本ie适配问题。 使用适配脚本文件,实现让ie6-8ie6-8支持属性选择器,类选择器元素

1.1K30

rem适配布局

整个页面只有一个 html,通过修改 html 文字大小,可以很好控制页面中元素大小。 媒体查询 介绍 媒体查询(Media Query)是 CSS3 新语法。...常见 CSS 预处理器: Sass、Less、Stylus Less 作为 CSS 一种形式上扩展,没有减少 CSS 功能,而是现有的 CSS 语法上,加入程序式语言特性。...VSCode 插件:Easy LESS 插件可以实现 安装插件后,重新加载 VSCode,之后只要保存 less 文件,会自动生成对应 CSS 文件。...} } 生成 CSS 样式上面的是一样 如果遇到交集|类|元素选择器: 如果内层选择器前面没有&符号,则被解析为父选择器后代;如果有,责备解析为父元素自身或父元素类。...; 多个数参与运算,如果只有一个数有单位,则最后就是以这个单位为准; 多个数参与运算,如果多个数有单位,则最后就是以第一个单位为准; 用上”/“式子可能会不起作用,甚至会报错,需要用小括号包住整个式子或者除法式子

1.3K30

【前端就业课 第一阶段】HTML5 零基础到实战(四)类与元素

1_bit:是的,但是你需要注意一个点,使用以上说明这几个类时,我们需要注意 hover 必须被写于 link visited 之后,否则无法生效哟,还有就是 active 必须放在 hover...1.3 其他类 1_bit:我们之前内容中有使用过列表标签 ul,那如何使用类给列表第一项元素标记值呢?这个也很简单,查看以下示例。 <!...1_bit:对元素理解概念类似,元素就是指模拟一个元素来实现某种效果。例如先看一个简单示例,咱们一句话中,需要给开头第一个字标红,这个时候常规写法如下。...1_bit:元素还可以使用 first-line(第一行)、before(什么之前)、after(什么之后)等,例如如下示例。...1_bit:这两节 css 相关内容咱们就说道这,现在有了基本css知识点在之后学习中会更加舒服,咱们之后还会开启一个CSS学习阶段届时将会更好学习CSS 相关内容,随后就可以制作比较精美的网页了

45030

网络编程(五)之HTML5CSS3提高

这种语义化标准主要是针对搜索引擎 这些新标签页面中可以使用多次 IE9 中,需要把这些元素转换为块级元素 其实,我们移动端更喜欢使用这些标签 1.2 HTML5 新增多媒体标签 使用它们可以很方便页面中嵌入音频视频...before after 创建一个元素,但是属于行内元素 新创建这个元素文档树中是找不到,所以我们称为元素 语法: element::before {} before after 必须有...content 属性 before 元素内容前面创建元素,after 元素内容后面插入元素 元素选择器标签选择器一样,权重为 1 实例如下: 元素选择器beforeafter div { width: 200px;...> 【7】CSS新增属性 过渡(transition)是CSS3中具有颠覆性特征之一,我们可以不使用 Flash 动画或JavaScript 情况下,当元素从一种样式变换为另一种样式时为元素添加效果

1.3K40

CSS基本知识点——带你走进CSS新世界

CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括——一篇文章带你完全掌握HTML>...em,span 行内元素特点包括: 相近元素一行 无法设置长宽 默认宽度为字宽度 行内元素只能容纳文本其他行内元素 最后我们介绍一下行内块元素: 行内块元素包括:img,input,td 行内块元素特点...,块元素,行内块元素 CSS写入三种方式 CSS作用HTML中一共有三种方法,我们一一介绍: 第一种:行内样式 直接在单个标签中写入style并进行书写 第二种:内部样式 html文件head... /* 例如我们希望ul中第一个最后一个li中单独进行CSS操作 */ ul li:first-child { color:...超链接CSS超链接中会出现动态情况,所以css给出相关类来改变超链接各种状态下形态 下面给出代码示例: <!

80420

前端课程——CSS选择器

浏览器解析 HTML 页面时,会根据 CSS 规则中选择器定位 HTML 页面的元素,并为对应元素设定样式。...组合选择器:具有交集并集两种用法,是将之前基本选择器层级选择器进行组合。 类选择器:允许未包含在 HTML 页面中状态信息选定位 HTML 元素。...元素选择器 CSS元素选择器用法与类选择器用法类似,都是指定 CSS 选择器增加关键字。.../* CSS3 语法 */ 选择器::元素 { 属性 : 属性值; } /* CSS2 过时语法 (仅用来支持 IE8) */ 选择器:元素 { 属性 : 属性值; } 元素选择器语法格式为...::selection 元素 ::selection 元素作用是匹配用户 HTML 页面选中文本内容(比如使用鼠标或其他选择设备选中部分)设置高亮效果。

47820

CSS笔记(20) 非常重要

好几天没有更新,因为我偷懒... 又到了新内容了,现在学习HTML5CSS3新特征. HTML新增特性主要是针对于以前不足,增加了一些新表单,新标签表单属性等....CSS3给我们新增了选择器,可以更加便捷,更加自由选择目标元素 属性选择器 结构类选择器 元素选择器 属性选择器: 属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者id...元素选择器(重点) 元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构. beforeafter创建一个元素,但是属于行内元素....before元素前面创建元素,after元素后面插入元素. 元素选择器标签选择器一样,权重为1..../images/tudou.jpg" alt=""> 之前我们学习过运用元素来清除浮动,现在学到了元素,可以解释一下原理了.

45020

CSS3 新特性

# CSS3 新特性 结构性类选择器(重点) 内容追加元素(重点) CSS3新增样式属性 background-image渐变 线性渐变(重点) CSS3opacity 属性(重点) CSS3...filter(滤镜) 属性 如同人类进化一样,CSS3是CSS2“进化”版本,CSS2基础上,增强或新增了许多特性, 弥补了CSS2众多不足之处,使得Web开发变得更为高效便捷。...# 结构性类选择器(重点) 结构性类选择器是CSS3中新增加类型选择器。常用结构性类选择器如下所示: :nth-child(n) 对指定序号元素设置样式(从前往后数)。...(重点) ::before:向当前元素前面追加内容(创建一个元素,其将成为匹配选中元素第一个子元素) ::after:向当前元素内容后面追加内容(创建一个元素,作为已选中元素最后一个子元素...) //每个 元素前面插入内容,并设置所插入内容样式: p:before { content:"开心"; background-color:yellow; color

51220

元素动画转换例子

一些创造性实验使用元素动画转换来创建有趣效果。 今天,我们将尝试动画元素(:之前之后转换,我们将发现它们潜力。...优点 简化优化HTML标记 利用CSS3能力 有助于设计 缺点 只支持Firefox,IE10最近Chrome浏览器(请参阅此更新支持表了解更多信息) 移动浏览器中不起作用 元素不能由ID...动画情况下,所有的转换直接影响到它们。如果我们想最大限度地提供支持,这可以派上用场。看看现在 Roman Komarov为元素使用CSS转换了解更多。 开始吧!...让我们回到我们主题。在这最后一个例子中:之前像父亲一样具有相同宽度。为了不会有意外溢出问题,我们将使用“继承”值。 例2 在这个例子中,我们将通过使用转换创建一个悬停效果。...总之,元素是一件好事,将它们与动画转换相结合,可以创建一些有趣效果,而不需要使用太多标记或图像。更广泛浏览器支持有望很快推出; 在那之前我们可以玩它,发现有趣有趣技术。

1.3K50
领券