Css 如何在元素所在的同一行上显示：：after内容？

根据需要在URL下面加下划线的CSS如下：

.下划线{ 文字装饰：无； 位置：相对位置； } .下划线：之后{ 位置：绝对位置； 内容：； 高度：2倍； 底部：-4px； 保证金：0自动； 左：0； 右：0； 宽度：50%； 背景：绿色； -o-转变：.5s； -ms转换：.5s； -moz转变：.5s； -webkit转换：.5s； 过渡：.5s； } 。下划线：悬停：在{ 宽度：80%； 背景：橙色； } 在我的页面上，一些URL是页面内链接，上面的工作正常

其他URL是外部链接，选中后离开页面

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

比如说

因此，我们为外部链接的URL创建了一个附加语句，其中包含target=\u blank

[目标=_blank]：：之后{ 内容：\279A； } 但在该实现中，符号\279A出现在新行上，这不是我想要的

以下操作失败：

[目标=_blank]：：之后{ 内容：\279A； 显示：内联块； } 我的问题是：对于这样的陈述：

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

---

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

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

.下划线{ 文字装饰：无； 位置：相对位置； } .underline:：before{/*我将其更改为：：before from:after*/ 位置：绝对位置； 内容：； 高度：2倍； 底部：-4px； 保证金：0自动； 左：0； 右：0； 宽度：50%； 背景：绿色； -o-转变：.5s； -ms转换：.5s； -moz转变：.5s； -webkit转换：.5s； 过渡：.5s； } .underline:hover:：before{ 宽度：80%； 背景：橙色； } [目标=_blank]：：之后{ 内容：\279A； }

---

过渡已经停止，我从我的原始添加回来，但它不再是动画。您是否会更新您的答案以合并该原始功能？除非我失踪了something@JayGray对不起，我忘了我删除了作为减少代码的一部分。一秒钟。编辑：好的，现在回来了。请你再帮我检查一下你的答案好吗？在我的问题中，下划线会改变颜色和宽度。但我没有在你的回答中明白这一点。我尝试了内联运行代码段，还将您的答案复制到了我的目标代码中-结果相同。@JayGray抱歉，忘记更新第二个：：after to：：before以匹配预转换的CSS。现在运行代码段并选中OK，我看到它在运行代码段中确实正常工作，但我在源代码中得到了一行新代码。已经在Chrome和Mozilla中进行了测试。给我一点时间，确保我没有做过傻事。