问题标签 [css-content]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 使用 :before 和类名选择并插入内容到链接不起作用
为什么以下不起作用:
HTML:
CSS:
不能用这种方法添加内容吗?遇到过好几次问题,是不是选的方式不对?
css - 为什么这个 CSS:before 语句在 IE 8、IE9 中不起作用?
使用 :before CSS 在此处获取图像/图标(请参见下图中的圆形圆圈),但在 Internet Explorer 8+ 中它只是没有显示。
这是网站: http ://www.websiteprofessioneel.nl
下面的图片链接显示了在此屏幕转储 http://tinypic.com/view.php?pic=xxd9f&s=5#.Ul_WajZRoWY上圈出的正确元素(它是第一个帖子标题中的图标)
这是为此的CSS:
也许有什么遗漏?所有其他浏览器都可以正常工作,据我所知,至少在 IE9 中完全支持 peudo CSS,但它在 IE8、9 及更高版本中均不工作。
html - 通过内容在同一个DIV中显示图像和文本
我正在为 IE 浏览器创建一个打印 CSS,在其中我必须通过 CSS 在 div 中添加文本和图像。我正在使用content
添加文本和background
添加图像,但不知何故未显示图像。
这就是我正在做的。
这是正确的方法吗?我在某处做错了吗?
谢谢。
html - CSS ::before伪元素行高?
我的段落的高度/行高为 50px 和text-align: center
,它使文本居中。但是 p:before 导致它的高度/行高增加,导致文本向下颠簸。我希望 p 和 p:before 都垂直居中。
文字长度各不相同,所以我认为我不能只position: absolute
用于图标...
css - attr(x) 在 CSS 中不起作用
所以我想pre
在文档网页中使用标签。现在,我希望正确的语言位于右上角。所以这就是我认为我可以做的:
然后我可以在 CSS 中使用after
andattr(X)
用以下内容填充 psuedo language
:
但这并没有做任何事情!
如果我改成attr("language")
它"Python"
可以工作...为什么 attr(X) 在这里不起作用?
jsfiddle
css - CSS 内容和背景 URL 图像的 SEO
想知道搜索引擎是否会对所有图像都设置为背景图像的页面有任何问题,以及它是否会正确地找到并索引每张图片下的“标题”(即 CSS 内容标签)。我真的不在乎搜索引擎是否找到背景图像,但我想让它们索引标题。
html - css 计数器在 Internet Explorer 中无法用于隐藏内容 - 如何解决?
我们想要一些编号列表,并找到了这个很酷的计数器,你可以在你的 CSS 中使用它来让浏览器为你计算数字:
我们正在制作的 html 包含指令集页面,每个指令集从 1、2、3 开始编号,依此类推。一次只能看到一组,当您单击标题时,您会显示该组并隐藏其他组。
它就像一种享受,我们坐在那里面带微笑,直到有人想到在 Internet Explorer 8 中测试它,在那里我们遇到了一些史诗般的微软风格的怪异。当通过单击调出一组时,所有数字都为零 (0)。
我用谷歌搜索并找到了这个页面- 它很好地描述了这个问题(它是在隐藏内容中使用 :hover 和 css 计数器逻辑的组合),但给出的解决方案不太令人满意 - 我希望能够保持使用 css 计数器并执行一些特定于 ie8 的 hack,以某种方式使页面更新数字。我很难在互联网上找到有关此问题的其他内容。
我的特定页面将描述零,直到我将鼠标指针移动到包含编号列表的 div 中,此时数字将神奇地自行修复。有什么我可以“推动”页面相信鼠标悬停在元素上的东西吗?还是有更合适的解决方案?
javascript - 在 Chrome 中获取伪元素内容
我在 webkit 浏览器中通过 Javascript 获取伪元素的生成内容时遇到了一些麻烦。
关心的人的上下文:我正在开发一个 jQuery 移动应用程序并尝试使用 FontAwesome 图标。我希望能够使用 jQM 用于其自己的内置图标集的相同数据图标属性来添加它们。所以我有一个脚本,它可以在页面上搜索任何具有该类的内容,ui-icon-whatever
并为 FontAwesome 添加相应的icon-whatever
类。问题是 FontAwesome 使用伪内容作为其图标,而 jQM 使用良好的老式背景图像精灵。因此,如果图标名称碰巧有任何重叠(例如,两组都有一个名为“编辑”的图标),我最终会得到一个图标层叠在另一个图标之上。正如您可能想象的那样,看起来……不太好。所以我试图通过并从任何.ui-icon
带有内容属性集。基本上,如果存在同名的 FontAwesome 图标,则删除 jQM 图标。
当我了解 getComputedStyle 时,我很兴奋,但我尝试window.getComputedStyle(this,':before').content != ''
了几种变体都无济于事。尝试使用 '::before' 并且仅将 'before' 作为第二个属性,并尝试将其与 null 或 false 而不是空字符串进行比较,但结果是相同的:它要么找到所有图标,要么没有找到它们。
当我window.getComputedStyle(this,':before').content
在 Chrome 的控制台中转储时,我总是得到一个空字符串,即使在应该有内容的情况下也是如此。Firefox 做对了。我不确定这是 Chrome 的东西还是 webkit 的东西。
我究竟做错了什么?
编辑:下载适用于 Windows 的 Safari 5。一样的。内容始终是一个空字符串。我开始认为这可能与我用来获取this
.
html - 在锚元素之后使用 :after 伪元素 - 浏览器差异
我有一个<a>
元素,之后我想使用伪元素 显示一个>
标志。:after
元素的<a>
内容是动态的,因此它的宽度会发生变化,有时内容事件会跨越几行(因为这个<a>
元素在<div>
who 的宽度是固定的)。
我希望>
的水平位置从最长行的末尾开始。也就是说,当我给它这个right:0;
规则时,它应该在元素的最右边(垂直位置现在无关紧要):
这就是它在 FF 中的行为方式,但在 Chrome 和 IE 中,>
出现在最短行的末尾:
我想了解导致浏览器之间差异的原因,但更重要的是,我希望所有浏览器的行为都像 FF - 将 放在:after
最长行的末尾。那可能吗?
我把上面的代码放在dabblet上
html - 与 li:before 上的伪元素组合时不显示文本
我有一个使用<li>
. 示例代码如下:
HTML:
CSS:
不使用样式li:before
时,文本<li>
将可见(即“菜单 1”、“菜单 2”),但使用此伪类li:before
时,它会消失。