我重新问这个问题,因为它的答案在我的案例中不起作用.
在我的打印媒体样式表中,我想在使用:after伪类的每个链接后附加url .
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
Run Code Online (Sandbox Code Playgroud)
在Firefox(可能是Chrome但不是IE8)中,text-decoration: none被忽略,并且下划线在URL的底部没有吸引力.该color然而,正确设置为黑色的网址.有没有办法让text-decoration工作?
的原来的问题所附固定大小的图像,而不是可变宽度的文本.它的答案使用填充和背景图像,以避免使用文本修饰属性.当内容是可变宽度文本时,我仍在寻找解决方案.
像所有有思想的人一样,我讨厌点击一个链接,发现太晚,导致浏览器瘫痪的PDF或Microsoft Office文件.我以为通过在导致这些文件的链接旁边显示一个小图标,我会让人们的生活变得更轻松.随着IE8最终支持:after伪元素,我认为CSS声明会相当简单:
a.file_pdf:after {
content:url('/images/pdf.png');
text-decoration: none;
padding-left: 5px;
}
Run Code Online (Sandbox Code Playgroud)
在IE8中,这很好用.但是,在Firefox和Chrome中,text-decoration: none忽略了下划线,并且下划线在图标底部没有吸引力.有没有办法通过使用额外的<span>标签来解决这个问题而不"欺骗" ?