相关疑难解决方法(0)

重新审视"text-decoration"和":after"伪元素

我重新问这个问题,因为它的答案在我的案例中不起作用.

在我的打印媒体样式表中,我想在使用: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工作?

原来的问题所附固定大小的图像,而不是可变宽度的文本.它的答案使用填充和背景图像,以避免使用文本修饰属性.当内容是可变宽度文本时,我仍在寻找解决方案.

css cross-browser pseudo-element

49
推荐指数
6
解决办法
3万
查看次数

"text-decoration"和":after"伪元素

像所有有思想的人一样,我讨厌点击一个链接,发现太晚,导致浏览器瘫痪的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>标签来解决这个问题而不"欺骗" ?

css pseudo-element

5
推荐指数
1
解决办法
2165
查看次数

标签 统计

css ×2

pseudo-element ×2

cross-browser ×1