如何仅从a：before下划线删除？

94

我有一组使用的样式链接:before以应用箭头。

在所有浏览器中看起来都不错，但是当我在链接上应用下划线时，我不想在:before零件上使用下划线（箭头）。

例如，请参见jsfiddle：http : //jsfiddle.net/r42e5/1/

是否可以删除它？我所坐的测试样式#test p a:hover:before确实得到了应用（根据Firebug），但是下划线仍然存在。

有什么办法可以避免这种情况？

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

展开摘要

— 擎天柱犯罪
source

好吧，您显然想要一个列表...使用UL元素代替DIV / P组合。随着列出你的子弹（或光盘，...），免费...

— 森那维达斯

为什么不使用带有自定义项目符号的列表而不是段落呢？否则，将内容前的内容应用于父级p，而不是链接自身。

— YuS 2012年

可能的重复stackoverflow.com/questions/8536015/...

— 奥里奥尔

171

是否可以删除它？

是的，如果您将内联元素的显示样式从display:inline（默认）更改为display:inline-block：

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

这是因为CSS规范说：

在内联元素上指定或传播到内联元素时，它会影响该元素生成的所有框，并进一步传播到拆分内联的任何流入块级框（请参见9.2.1.1节）。[…]对于所有其他元素，它会传播到任何流入子元素。请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级别后代的内容，例如内联块和内联表。

（强调我的。）

演示：http：//jsfiddle.net/r42e5/10/

_{感谢@Oriol提供的变通办法，促使我检查了规格并确认变通办法是合法的。}

— 佛罗兹
source

2

您可以使用覆盖text-decoration:underline应用于父元素的元素display:inline-block。查看示例：jsfiddle.net/aZdhN/1。然后，可以像这样解决asker的问题：stackoverflow.com/a/17347068/1529630

— Oriol 2013年

3

据我所知，这在Internet Explorer（测试8-10）中不起作用。有什么想法如何处理IE吗？

— Linus Caldwell

我也找到了也在IE8-11中运行的解决方案：stackoverflow.com/a/21902566/1607968

— LeJared 2014年

52

IE8-11中存在一个错误，因此display:inline-block;仅在此处无法使用。

我已经找到了针对该错误的解决方案，方法是：显式设置text-decoration:underline;：before-content，然后再次覆盖此规则text-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

这里的工作示例：http : //jsfiddle.net/95C2M/

更新：由于jsfiddle不再适用于IE8，只需将此简单演示代码粘贴到本地html文件中，然后在IE8中打开它：

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

— 勒贾里德
source

如果发生这样的情况，则只能由内部关闭具有超链接图像的IE8下划线<img style="text-decoration:underline">（这是关键）<a style="padding:0; border:none;">

— Bob Stein

不幸的是，jsfiddle无法在IE8中进行验证，因为jsfiddle在IE8中不起作用。

— user2867288

不幸的是，我找不到任何仍可与IE8一起使用的在线代码共享工具。我在上面的答案中添加了一段代码，您可以将其粘贴到html文件中并在IE8中本地打开。

— LeJared 2015年

经过IE9测试和批准，没有两个不同状态的事件。

— saeraphin

在：before之前有一个带有图标的链接，在静止状态下不带下划线，然后在悬停时带下划线，但没有图标。这是我必须说服IE正确执行的操作：{text-decoration：none} a：before {text-decoration：underline} a：before {text-decoration：none}（是的，第一行实际上是然后不覆盖任何内容）a：hover {text-decration：underline} a：hover：before {text-decoration：none}

— Fake Haak

7

您可以将以下内容添加到:before元素中：

display: inline-block;
white-space: pre-wrap;

随着display: inline-block底线就会消失。但是，问题在于三角形之后的空间塌陷了，没有显示出来。要解决此问题，可以使用white-space: pre-wrap或white-space: pre。

演示：http : //jsfiddle.net/r42e5/9/

— i
source

1

+1为pre-wrap提示。我正在使用content:'►\a0'（\ a0 =＆nbsp;）

— Hashbrown

1

将您的链接包裹在span中，然后将文本装饰添加到a：hover上的span中，如下所示：

a:hover span {
   text-decoration:underline;
}

我已将您的小提琴更新为我认为您正在尝试做的事情。http://jsfiddle.net/r42e5/4/

— 乳房
source

好主意。那是我以前所做的。问题在于此链接是在cms系统中生成的，我们的客户自己以RTF文本形式填充此链接。

— OptimusCrime 2012年

CMS是什么语言？能否将其吐出链接，然后将其包装在一个范围内，然后再发送给浏览器？

— Udders 2012年

该公司正在使用modx。我想我可以做为最后的出路，但我真的想废除那个。猜猜不可能。不管怎么说，多谢拉。

— OptimusCrime 2012年

-1

尝试改用：

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

可以吗？

— 埃伦
source

我的div中有may段落，因此无法正常工作。好主意

— OptimusCrime 2012年

有趣的是，如果接受的答案表明相同但形式不同，则将-1放进去

— Elen 2012年

-4

用这个

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

— 比平·钱德拉·特里帕蒂（Bipin Chandra Tripathi）
source

什么也没做。文本装饰将被忽略。

— OptimusCrime 2012年