如何在[ element?的同一行上显示:: after内容

Question

具有以下根据需要在URL下方加上划线的CSS：

.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是外部链接，并且在选择后离开页面。

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

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

因此，为作为外部链接并包含target =“ _ blank”的URL创建了一条附加语句。

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以删除最终的换行符并使离开页面符号保持在链接附近？

具有以下CSS，可以根据需要在URL下划线：.underline {text-decoration：none;职位：相对} .underline：之后{位置：绝对；内容：”;高度：2px；底部：...

Answer 1

您有两个单独的选择器，它们将样式应用于相同的::after伪元素。 a[target="_blank"]::after和.underline:after都针对同一对象。您可以从.underline:after中删除定位属性，并且该图标将为嵌入式，或者您可以将第一个样式移至::before：