如何仅删除 a:before 中的下划线？

发布于 2024-12-26 07:18:43 字数 958 浏览 2 评论 0原文

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

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

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

是否可以删除这？我使用 #test pa: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>

原文

I have a set of styled links using the :before to apply an arrow.

It looks good in all browser, but when I apply the underline to the link, I don't want to have underline on the :before part (the arrow).

See jsfiddle for example: http://jsfiddle.net/r42e5/1/

Is it possible to remove this? The test-style I sat with #test p a:hover:before does get applied (according to Firebug), but the underline is still there.

Any way to avoid this?

#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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉梦枕江山 2025-01-02 07:18:43

可以删除这个吗？

是的，如果将内联元素的显示样式从 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 提供了解决方法，促使我检查规范并查看该解决方法是否合法。}

Is it possible to remove this?

Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block:

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

This is because the CSS specs say:

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

(Emphasis mine.)

Demo: http://jsfiddle.net/r42e5/10/

_{Thanks to @Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.}

回复收藏 0 原文

玻璃人 2025-01-02 07:18:43

IE8-11 中存在一个错误，因此单独使用 display:inline-block; 在那里不起作用。

我找到了解决此错误的方法，方法是为 :before-content 显式设置 text-decoration:underline; ，然后使用 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>

There is a Bug in IE8-11, so using display:inline-block; alone won't work there.

I've found a solution for this bug, by explicitly setting text-decoration:underline; for the :before-content and then overwrite this rule again with 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;}

Working example here:
http://jsfiddle.net/95C2M/

Update:
Since jsfiddle does not work with IE8 anymore, just paste this simple demo-code in a local html file and open it in 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>

回复收藏 0 原文

赴月观长安 2025-01-02 07:18:43

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

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

使用 display: inline-block 下划线消失。但问题是三角形之后的空间折叠并没有显示出来。要修复此问题，您可以使用 white-space: pre-wrap 或 white-space: pre。

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

You can do it adding the following to the :before element:

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

With display: inline-block the underline disappears. But then the problem is that the space after the triangle collapses and is not shown. To fix it, you can use white-space: pre-wrap or white-space: pre.

Demo: http://jsfiddle.net/r42e5/9/

回复收藏 0 原文

落花浅忆 2025-01-02 07:18:43

将您的链接包装在跨度中，并将文本装饰添加到 a:hover 上的跨度中，如下所示，

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

我已将您的小提琴更新为我认为您正在尝试执行的操作。 http://jsfiddle.net/r42e5/4/

Wrap your links in spans and add the text-decoration to the span on the a:hover like this,

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

I have updated your fiddle to what I think you are trying to do. http://jsfiddle.net/r42e5/4/

回复收藏 0 原文

摘星┃星的人 2025-01-02 07:18:43

尝试使用：

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

这样可以吗？

try using instead:

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

will that do?

回复收藏 0 原文

狼性发作 2025-01-02 07:18:43

用这个

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

}

use this

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

}

回复收藏 0 原文

~没有更多了~

关于作者

顾忌

暂无简介

文章

271 人气

关注发私信

友情链接

文江博客

如何仅删除 a:before 中的下划线？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

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

Demo: http://jsfiddle.net/r42e5/10/

关于作者

相关话题

热门标签

推荐作者

佚名

羁客

天天爱笑的徐老师

星

夏日落

隐诗

友情链接

如何仅删除 a:before 中的下划线？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

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

Demo: http://jsfiddle.net/r42e5/10/

关于作者

相关话题

热门标签

推荐作者

佚名

羁客

天天爱笑的徐老师

星

夏日落

隐诗

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。