为内联 svg 添加不带文本的下划线文本装饰

Question

我有一个 SVG 元素作为图标出现在链接之后：

<a class="external-link" href="http://www.google.com">google.com
    <svg class="external-link-svg">...</svg>
</a>

我希望下划线延伸到 svg 元素下方。从图像中可以看出，我已经完成了这项工作，但我设法做到这一点的唯一方法是在 CSS 中插入空格：

.external-link:after {
    content: "\00a0\00a0\00a0\00a0";
}

这感觉有点像黑客，因为如果我改变图标，比如说更宽或更窄的图标，下划线将不再是正确的长度。

有没有办法在不注入空格的情况下延长下划线？

非常感谢

Answer 1

2. 线条修饰：下划线、上划线、删除线

默认情况下，下划线、上划线和穿线仅应用于非替换的行内框，并在所有文本（包括空白、字母间距和字间距）上绘制。原子内联（例如图像）不会被修饰。

我认为 SVG 是原子内联的一部分。<text>但如果中有元素<svg>，它可能会继承容器上设置的线条装饰风格。

有一些替代方法可以获得与下划线装饰类似的结果。

1.border-bottom

a {
  text-decoration: none;
  color: black;
  border-bottom: 1px solid;
}

<a href="#">Link <svg width='12' height='9' viewBox='0 0 12 9' fill-rule='evenodd'><path d='M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z'></path></svg></a>

2.box-shadow

a {
  text-decoration: none;
  color: black;
  box-shadow: inset 0 -1px 0 0 black;
}

<a href="#">Link <svg width='12' height='9' viewBox='0 0 12 9' fill-rule='evenodd'><path d='M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z'></path></svg></a>

3.background

a {
  text-decoration: none;
  color: black;
  background: linear-gradient(black, black) 0 100% / 1px 1px repeat-x;
}

<a href="#">Link <svg width='12' height='9' viewBox='0 0 12 9' fill-rule='evenodd'><path d='M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z'></path></svg></a>

Answer 2

您可以使用:after伪CSS来绘制下面的下划线..

^{注意：我现在添加了一个图标...您可以放置​​您的 svg 而不是图标。记得把svg放进去<a>}

堆栈片段

.external-link {
  position: relative;
  text-decoration: none;
  font-weight: bold;
  color: #000;
  font-family: verdana;
}

a.external-link:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid #000;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<a class="external-link" href="#">google.com<i class="fa fa-home"></i></a>