为内联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

您可以使用:after伪css绘制下方的下划线。

  

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

Stack Snippet

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这也是一种破解，但可能是改进的起点：

＆＃13;

＆＃13;

<span style="border-bottom: solid blue 1px;">
    <a href="http://google.com" style="text-decoration: none">google.com<img src="https://linearicons.com/free/icon/lnr-book.svg"/></a>
</span>

＆＃13;

＆＃13;

＆＃13;

也适用于内联svg元素：

＆＃13;

＆＃13;

<span style="border-bottom: solid blue 1px;">
    <a href="http://google.com" style="text-decoration: none">google.com<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M14.5 18h-10c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"></path>
<path fill="#000000" d="M16.5 3c-0.276 0-0.5 0.224-0.5 0.5v15c0 0.276-0.224 0.5-0.5 0.5h-11c-0.827 0-1.5-0.673-1.5-1.5s0.673-1.5 1.5-1.5h9c0.827 0 1.5-0.673 1.5-1.5v-12c0-0.827-0.673-1.5-1.5-1.5h-10c-0.827 0-1.5 0.673-1.5 1.5v15c0 1.378 1.122 2.5 2.5 2.5h11c0.827 0 1.5-0.673 1.5-1.5v-15c0-0.276-0.224-0.5-0.5-0.5zM3.5 2h10c0.276 0 0.5 0.224 0.5 0.5v12c0 0.276-0.224 0.5-0.5 0.5h-9c-0.562 0-1.082 0.187-1.5 0.501v-13.001c0-0.276 0.224-0.5 0.5-0.5z"></path>
</svg></a>
    
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

<强> 2. Line Decoration: Underline, Overline, and Strike-Through

  

默认情况下，下划线，上划线和直通仅应用于未替换的内联框，并在所有文本中绘制（包括空格，字母间距和字间距）。 未修饰原子内联，例如图像。

我认为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 4

这是一个使用默认text-decoration的解决方案，您可以轻松管理该行的溢出：

span {
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  padding-right: 10px;
  /* Control the overflow of line*/
}

span:after {
  content: "\00A0";
  position: absolute;
  text-decoration: underline;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  letter-spacing: 1000px;
}
a.through,a.through span:after {
 text-decoration:line-through;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<a href="#">google Link 
<span><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></span></a>
<br>
<a href="#">google Link <span><svg width="50" height="10">
  <rect width="50" height="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg></span></a>
<br>
<a href="#" class="through">google Link <span><svg height="10" width="10" viewbox="0 0 200 250 ">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg></span></a>
<br>
<a href="#" class="through">google Link 
<span><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></span></a>

工作原理？

由于我们不能将文本修饰应用于svg，我们的想法是将svg包装在一个范围内并在范围内使用一个伪元素，我们在可以应用文本的地方创建一个不可破坏的空间 - 装饰。诀窍是使这个元素成为绝对位置并将其拉伸到整个跨度，因此它的大小将与svg 相同。

然后我们使用大的字母间距值来确保线条足够大，我们只需用overflow:hidden隐藏不需要的部分。为了控制溢出，我们可以简单地在跨度上添加一些填充。