开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法在IE11上查看::before中的伪元素内容

在IE11浏览器上无法查看::before中的伪元素内容是因为IE11不支持CSS伪元素的content属性。伪元素是通过CSS选择器来创建的虚拟元素，可以用于在元素的前面或后面插入内容。而::before伪元素是在元素的内容之前插入内容，通过content属性来定义插入的内容。

由于IE11不支持::before伪元素的content属性，所以无法在该浏览器上查看::before中的伪元素内容。这可能会影响到一些使用了::before伪元素的样式效果，比如图标字体、自定义列表样式等。

为了解决这个问题，可以考虑以下几种方法：

使用其他浏览器：IE11是一个较老的浏览器版本，现代浏览器如Chrome、Firefox、Safari等都支持::before伪元素的content属性，可以在这些浏览器上查看伪元素内容。
使用JavaScript替代：可以通过JavaScript来动态地插入内容，以达到类似::before伪元素的效果。通过操作DOM元素，可以在元素的前面插入内容，并设置样式来实现相应的效果。
考虑兼容性：如果需要在IE11上展示::before伪元素的内容，可以考虑使用其他方式来实现相同的效果，比如使用背景图片、额外的HTML元素等。

腾讯云相关产品和产品介绍链接地址：腾讯云提供了丰富的云计算产品和服务，可以帮助用户构建稳定、高效、安全的云计算环境。以下是一些与云计算相关的腾讯云产品和产品介绍链接地址，供参考：

云服务器（CVM）：提供弹性计算能力，支持按需创建、配置和管理云服务器实例。详情请参考：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，支持自动备份、容灾、监控等功能。详情请参考：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：提供安全、可靠、低成本的对象存储服务，适用于存储和处理各种非结构化数据。详情请参考：https://cloud.tencent.com/product/cos
人工智能平台（AI Lab）：提供丰富的人工智能算法和模型，支持图像识别、语音识别、自然语言处理等应用场景。详情请参考：https://cloud.tencent.com/product/ai

请注意，以上链接仅供参考，具体的产品选择和使用需根据实际需求进行评估和决策。

相关搜索:Css :after和:before伪元素在IOS中不能正常工作 CSS:无法查看设置此元素的最大高度的内容伪类和伪元素在postcss上的嵌套样式中不起作用位置:修复伪元素时，CSS背景图像不显示在IE11上使Div中的伪元素中的内容图像居中在IE11中使用表中的flexbox元素在IE中伪元素之前的列表中的绝对定位图像内容(11)在python列表上收缩类似元素的内容在伪元素之后显示另一个div中的内容在父元素的伪元素(::after/::before)上更改子元素的css使用CSS悬停

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 3.0中伪元素after和before的妙用

我们常用CSS 3.0中的伪元素来修饰一些细节，让页面看起来效果更好，比如下面这个图片中的面包屑导航中的符号，还有任务清单前的序列符号，都是用伪元素实现的。 ?...以下是代码实现，希望能对初学者有一个简单的认识。 CSS 3.0中伪元素...after和before的妙用 /* 面包屑导航 */ .breadcrumb {...first-child { color: #82fcfd; } .breadcrumb a:first-child::before

1.1K1 0

jQuery 中在元素中添加插入内容方法 after, append, appendTo, before, prepend, prependTo 的区别

jQuery 在元素中添加插入内容的方法和区别，整理成表格，省的每次都要翻： jQuery方法解释 after() 在被选元素之后插入指定内容 insertAfter() 在被选元素之后插入 HTML...append() 在被选元素的结尾（仍然在内部）插入指定内容 appendTo() 在被选元素的结尾（仍然在内部）插入 HTML 标记或已有的元素。...before() 在被选元素之前插入指定内容 insertBefore() 在被选元素之前插入 HTML 标记或已有的元素。如果用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。...prepend() 在被选元素的开头（仍然在内部）插入指定内容 prependTo() 在被选元素的开头（仍然在内部）插入 HTML 标记或已有的元素千言解释不如一图示意：具体代码： 3. before'); $target.after('4. after'); $('<

1.8K3 0

::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

然而，由于历史原因，单冒号也可以用于表示某些伪元素，如:before、:after。这种用法在CSS2中被允许，但在CSS3中不再推荐。...关于 ::before 和 ::after 伪元素的作用： ::before 伪元素：用于在选定元素的内容前插入一个生成的内容。...::after 伪元素：用于在选定元素的内容后插入一个生成的内容。它允许在元素的结束位置插入额外的样式化内容，通常用于添加装饰性的元素或生成清除浮动的伪元素。...::before 和 ::after 伪元素可以用于在元素的内容前后插入生成的内容，用于装饰、布局等目的。除了::before和::after之外，还有哪些常用的CSS3伪元素？...常见的单冒号(:)伪类有哪些？单冒号(:)用于表示 CSS 中的伪类，它们是一些用于选择特定状态或特定位置的元素的类别。以下是一些常见的单冒号伪类： :hover：当鼠标悬停在元素上时应用的样式。

4672 0

干货：CSS 专业技巧

使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格。...任何元素，任何时间，任何地点？CSS-Tricks 有篇好文讲到了各种居中的技巧。注意： IE11 对 flexbox 的支持有点 bug。...而且复制粘贴并不会带走CSS生成的内容,需要注意。使用负的 nth-child 来选择元素使用负的 nth-child 可以选择 1 至 n 个元素。...利用属性选择器来选择空链接当元素没有文本内容，但有 href 属性的时候，显示它的 href 属性： a[href^="http"]:empty::before { content: attr...使用选择器 :root来控制字体弹性在响应式布局中，字体大小应需要根据不同的视口进行调整。

1.5K5 0

重温前端-css篇

例如通过伪元素您可以设置段落中第一个字母的样式，或者在元素之前、之后插入一些内容等等。在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号:与选择器相连。...CSS 中提供了一系列的伪元素，如下表所示：伪元素例子例子描述 ::after p::after 在每个元素之后插入内容 ::before p::before 在每个元素之前插入内容 ::...::after 伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效...::before 伪元素 ::before 能够在指定元素的前面插入一些内容。...CSS2 之后所有新增的伪元素(如::selection)，应该采⽤双冒号的写法。 CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。

8123 0

分享：12个CSS小技巧，让你的代码简洁高效

使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素...…… /* remove border */ .nav li:last-child { border-right: none; } ……可以直接使用 :not() 伪类来应用元素： .nav li:...注：在IE11中要小心flexbox。...() 伪类。...使用属性选择器用于空链接当元素没有文本值，但 href 属性有链接的时候显示链接： a[href^="http"]:empty::before { content: attr(href)

8362 0

【CSS】378- 44个 CSS 精选知识点

此方法还允许将内容正常放置在元素内。浏览器支持情况 100% 4.使用表格居中使用display：table（作为flexbox的替代）使子元素在其父元素中水平垂直居。...可在 CodePen 上查看真实效果和编辑代码说明使用：before伪元素的样式垂直对齐内联元素而不更改其position属性。浏览器支持程度 99.9% caniuse 9....此函数可以接收两个参数，第一个作为计数器的名称，第二个参数表示占位内容，例如 3.1的小数点。 CSS计数器对于制作轮廓列表特别有用，因为计数器的新实例是在子元素中自动创建的。...CodePen上查看和编辑代码说明浏览器会对字体进行逐个查找，如果找到的话就是用当前的，如果找不到字体（在系统上或在CSS中定义），则继续往后查找。...CodePen上预览和编辑代码说明使用：before和：after伪元素作为在悬停时设置动画的边框。浏览器支持程度 100%. 35.甜甜圈旋转器创建一个甜甜圈旋转器，可用于等待内容的加载。

5.3K1 0

12 个 Css 小技巧

使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG 优化显示文本对纯CSS滑块使用 max-height...继承 box-sizing 表格单元格等宽用Flexbox摆脱外边距的各种hack 使用属性选择器用于空链接使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add...注：在IE11中要小心flexbox。...() 伪类。...使用属性选择器用于空链接当元素没有文本值，但 href 属性有链接的时候显示链接： a[href^="http"]:empty::before { content: attr(href)

1.1K1 0

关于伪类元素:before和:after

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下： #example:before { content...'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下: #Here is the example content$ 需要注意的是如果没有content属性，伪类元素将没有任何作用...但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。...但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。...一种更好的方法是利用CSS，所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没，只要在父容器上应用这个类即可实现清除浮动。

1K1 0

【CSS3】CSS3 2D 转换 - rotate 旋转 ④ ( 旋转案例 )

, 预先绘制了两个盒子模型 , 一个是空的盒子模型 , 在空盒子模型中 , 绘制了一个子盒子 , 子盒子是有实际元素的盒子模型 ; 有实际内容的子盒子模型 , 初始状态就沿着...左下角为中心点 , 顺时针旋转了 90 度 ; 如果父容器设置了 /* 隐藏边界之外的元素旋转前的伪类 div::before 元素需要先隐藏...div::before 伪元素添加进去的 ; div::before 伪元素是行内元素无法设置大小 , 需要将其设置为行内块元素才能设置宽高 ; /* before 元素是行内元素...无法设置大小将其设置为行内块元素才能设置宽高 */ display: block; 为实际内容设置旋转相关的属性 : 旋转中心点 ,...伪元素上的效果 */ div:hover::before { /* 鼠标移动上去后 */ transform: rotate

2732 0

为什么大家都用i标签用作小图标?

"; } 这个例子中提到了两件事情，第一，我们用#example:before和#example:after来目标锁定相同的元素.严格的说，在代码中他们是伪元素。...从技术上讲，你可以普遍的应用伪元素，不是放在特殊的元素上，像这样： :before { content: "#"; } 虽然上面是有效的，但是它十分的没用。...在css中，这段内容被设置了宽度，以及一些padding和可见的边框然后我们有了伪元素。在这个例子中，它是一个散列符号插入到该段内容之前。...这里是浏览器中查看的结果：外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。...（更新：在评论中提到的，你可以使用谷歌的开发工具来查看一个伪元素相关联的风格，但不会出现在DOM元素里。同时，火狐在1.8版加入伪元素支持它。）你所需要用有的理念是用这个技术以创造出实用的东西。

1.8K5 1

常用的 CSS 技巧

moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 使用 :not() 在菜单上应用...注意：在IE11中要小心flexbox。...() 伪类。...使用属性选择器用于空链接当a元素没有文本值，但 href 属性有链接的时候显示链接： a[href^="http"]:empty::before { content: attr(href); }...pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

6930 0

20个常用的CSS技巧，收藏就是捡到

使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素...注意：在IE11中要小心flexbox。 6....() 伪类。...使用属性选择器用于空链接当a元素没有文本值，但 href 属性有链接的时候显示链接 a[href^="http"]:empty::before { content: attr(href); } 相当方便...禁用鼠标事件 CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

4063 0

css篇-面试题6-伪类与伪元素的区别

: 伪元素用于创建一些不在文档树中的元素,并为其添加样式。...比如说，我们可以通过:before 来在一个元素前增加一些文本，并为这些文本添加样式。...虽然用户可以看到这些文本，但是这些文本实际上不在文档树中伪元素前面是两个冒号，E::first-line 伪元素。...会创造出不存在的新元素，由于 css 对单冒号的伪元素也支持，单双冒号都支持,但实际上现在css3 已经明确规定了伪类单冒号，伪元素双冒号的规则,用于区分它们 ::before/:before在被选元素前插入内容...::after/:after 在被元素后插入内容，其用法和特性与:before相似::placeholder 匹配占位符的文本，只有元素设置了placeholder 属性时，该伪元素才能生效对于伪元素

1.5K2 0

理解CSS伪元素 :before 和 :after

层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。...关于语法和浏览器支持伪元素实际上在CSS1中就存在了，但是我们现在所讨论的:before和:after则发布于CSS2.1中。...在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（比如:hover，:active...它是做什么的简而言之，伪元素将会在内容元素的前后插入额外的元素，因此当我们添加它们时，使用以下的标记方式，他们在技术上是平等的。...使用伪元素使用伪元素是相对容易的，:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。

9073 0

重新认识伪类和伪元素

虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。伪元素用于创建一些不在文档树中的元素，并为其添加样式。...比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。...::before/:before 在被选元素前插入内容 ::after/:after 在被元素后插入内容，其用法和特性与:before相似。...这个伪元素只能用在块元素中，不能用在内联元素中。 ::selection 匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。...在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式。

9622 0

「css基础」你想知道的伪元素内容都在这篇文章里（长文值得收藏）

，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，文中的内容和例子笔者都做了确认与验证，如有问题，欢迎留言指正。...，两者都是以display:inline-block的属性存在，::before是在原本的元素「之前」加入内容，::after则是在原本的元素「之后」加入内容，同时伪元素也会「继承」原本元素的属性，如果原本文字是黑色...经过查询W3C的官网，发现了下面这段话，意思大概就是说网页里面有定义一些所谓「包覆式、点缀式的标点符号」，如果是这些包覆式的标点符号，基本上就无法放大，反而需要搭配其它字符进行使用，因此，在使用第一个字进行特殊变化时...修改伪元素属性我们可以读取属性值也就一定要尝试修改，不过修改伪元素的属性其实比想像中的难，必须通过insertRule这个方法在指定的style里插入「预设的规则」，让这个规则去影响伪元素的属性表现。...虽然说伪元素很好用，但伪元素的内容实际上不存在网页里( 如果打开浏览器的开发者工具，是看不到内容的)，所以如果在里头塞了太多的重要的内容，反而会影响到SEO 的成效，因此对于使用伪元素的定位，还是当作「

9403 0

CSS counter-increment计数器自动递增

一、CSS计数器三角关系 CSS计数器只能跟content属性在一起的时候才有作用，而content属性貌似专门用在before/after伪元素上的。...于是，就有了，“计数器↔伪元素↔content属性”的铁三角关系。...2变成了3，wangxiaoer就是这里的计数器，自然伪元素content值counter(wangxiaoer)就是3. ② 当然，也可以普照自身，也就是counter-increment直接设置在伪元素上...还是要记住这一句话：“一个容器里的普照源(reset)是唯一的”，所以，如果你不小心把计数显示和技术reset元素以兄弟元素形式放在一起（虽然HTML内容布局呈现是没有异常的），就很可能会出现计数序号乱入的情况...所以，我们可以在头尾放两个差距甚远的列表，然后，这些列表自动显示序号。而ol/ul只能写死start实现，很不灵活，一旦列表有删减，就嗝屁了。由于计数器是伪元素控制显示的。

1.7K2 0

【译】CSS列表，标记，计数器

68）另外，还可以在非列表项上使用::marker伪元素。...::marker伪元素中的content属性在规范中是最近添加的，但在Firefox 68中也已支持。...遗憾的是，目前无法通过功能查询来检测选择器对::marker伪元素的支持，尽管已经有一个关于将其添加到规范中的ISSUE。这意味着，无法针对不支持的浏览器环境区分处理。...h2 { counter-increment: heading-counter; } 为了查看结果，我们需要将内容输出到文档中，可以通过给标题的::before伪元素设置content来生成内容。...（查看示例）这在实际中有多高的使用性是值得商榷的，对于上面例子中计数器生成的值，最大的作用也就是将其在输出内容中展示。

1.1K3 0

CSS伪类与伪元素「建议收藏」

实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。...比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。伪类的分类：状态伪类和结构性伪类状态伪类：是基于元素当前状态进行选择的。...常见的伪元素选择器： ::first-letter 选择元素文本的第一个字（母）。 ::first-line 选择元素文本的第一行。 ::before 在元素内容的最前面添加新内容。...::after 在元素内容的最后面添加新内容。...单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

1.5K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭