CSS:在链接的一部分中略过下划线

Question

是否有可能有一个连续的链接,鼠标悬停时文本通常加下划线,但中间有一个没有这个下划线的部分(例如图像)？这不起作用:

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>

Answer 1

创建一个隐藏下划线的类，以及添加下划线的子类。

.underline-some {
  text-decoration: none;
}

.underline-some:hover .text {
  text-decoration: underline;
}

<a href="#" class="underline-some">
  <span class="text">Boyz</span> 
  <span class="text">Men</span>
</a>

上面的示例代码仅在悬停时强调链接。对于始终带有下划线的链接，请删除:hover.

Answer 2

我真正想要的是将图像“附加”到链接上，而不会在悬停时带有下划线。这是我想出的一个解决方案：

<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>

• padding-left用于偏移文本，使其不与图像重叠。
• 使用背景位置，您可以移动图像以使其更好地与文本对齐。
• 如果图像高于文本，则可以使用padding-top 和padding-bottom来调整外观。

这种技术也可以与CSS 精灵一起使用，如下所示：

<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>

我使用了类似的技术来使用 CSS sprites 而不是普通的内联图像：

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

希望这对某人有帮助