如何在与 <a> 元素相同的行上显示 ::after 内容？

Question

有以下 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 是页内 link，上面的工作正常。

其他 URL 是外部 link，选择后离开页面。

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

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

因此，为外部 link 的 URL 创建了一个附加语句，并包含 target="_blank"

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

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

以下失败：

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

我的问题是：对于如下所示的语句：

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

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

Answer 1

您有两个单独的选择器，它们将样式应用于同一个 ::after 伪元素。 a[target="_blank"]::after 和 .underline:after 都针对同一件事。您可以从 .underline:after 中删除定位属性，图标将内联，或者您可以将第一个样式移动到 ::before:

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

.underline::before { /* I changed this to ::before from :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::before {
  width: 80%;
  background: orange;
}

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

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

如何在与 <a> 元素相同的行上显示 ::after 内容？

How to show ::after content on the same line as an <a> element?

css

pseudo-element