有以下CSS可以根据需要在URL下划线:

.underline {
  text-decoration: none;
  position: relative;
}

.underline:after {
  position: absolute;
  content: '';
  height: 2px;
  bottom: -4px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 50%;
  background: green;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}

.underline:hover:after {
  width: 80%;
  background: orange;
}

在我的页面上，一些URL是页面内链接，上面的工作很好。

其他URL是外部链接，当选中时，将离开页面。

为了向用户发出选择链接将离开页面的信号，我想在锚语句后面放一个符号。

例如wikipedia

因此，已经为外部链接的URL创建了一个附加语句，其中包括target=“_blank”

a[target="_blank"]::after {
  content: "\279A";
}

但是在那个实现中，符号“\279a”出现在一个新的行上，这不是我想要的。

以下操作失败:

a[target="_blank"]::after {
  content: "\279A";
  display: inline-block;
}

我的问题是:对于这样的声明:

<a class="underline" href="https://https://en.wikipedia.org/wiki/Main_Page" target="_blank">Wikipedia</a>

如何修改CSS以删除所产生的换行符并保持离开页面符号与链接相邻？