看来IE不关心text-decoration: none;的定义a:before伪元素(或伪类).
这是一个JS小提琴:http://jsfiddle.net/9N35f/
我希望">"失去下划线.它适用于FF,Chrome和Safari,但不适用于IE.用IE10和IE9测试.
我可以尝试使:before元素失去下划线的任何变通方法?理想情况下在IE9 +中
这个地方有错误报告吗?或者它是否符合标准?
可能重复:
"text-decoration"和":after"伪元素
"text-decoration"和":after"伪元素,重新访问
我正在使用<a>标签制作导航链接以下是html
<div class="nav_container">
<a class="panel" href="demolink">menu1</a>
<a class="panel" href="demolink">menu2</a>
<a class="panel" href="demolink">menu3</a>
</div>
Run Code Online (Sandbox Code Playgroud)
并应用:aftercss属性为分隔符放置管道
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
}
.panel:last-child:after{
content:"";
}
Run Code Online (Sandbox Code Playgroud)
我想在选择菜单时使用下划线,因为我正在应用一个名为selected的类
.panel.selected {
text-decoratoion:underline;
}
Run Code Online (Sandbox Code Playgroud)
但问题是菜单后面的pipline"|" 也有下划线,我想删除它.我甚至试图改变css .panle:after如下,
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
text-decoration:none;
}
Run Code Online (Sandbox Code Playgroud)
但仍有下划线.
有任何建议,谢谢.
像所有有思想的人一样,我讨厌点击一个链接,发现太晚,导致浏览器瘫痪的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>标签来解决这个问题而不"欺骗" ?
你知道为什么line-through文本装饰:before没有被覆盖吗?
HTML
<p>Should be strike-through</p>
Run Code Online (Sandbox Code Playgroud)
CSS
p {
text-decoration: line-through;
}
p:before {
content: "Should not be strike-through. ";
text-decoration: none !important;
}
Run Code Online (Sandbox Code Playgroud)
任何想法如何只line-through添加一部分文本而不添加额外的元素,如<span>?
我不想使用,a {text-decoration:none;}因为我不想影响所有链接
我有一个div class="explore"没有内容,除了:after使用css生成内容:
content: "Explore";
vertical-align: top;
text-decoration: none;
Run Code Online (Sandbox Code Playgroud)
然后我把div包裹起来 <a href="#">...</a>
这给文本"example"一个下划线,我似乎无法删除; 我试过了:
.explore a { text-decoration:none; }
.explore:after a { text-decoration:none; }
a .explore { text-decoration:none; }
a .explore:after { text-decoration:none; }
Run Code Online (Sandbox Code Playgroud)
这些似乎都没有影响到文本.
如何删除下划线?