具有以下 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 是外部链接，选择后离开页面。
为了向用户发出选择链接将离开页面的信号，我想在锚语句后放置一个符号。
例如 <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 以删除产生的换行符并保持离开页面符号与链接相邻？
您有两个单独的选择器，它们将样式应用于同一个::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: "\279A";
}<a class="underline" href="https://https://en.wikipedia.org/wiki/Main_Page" target="_blank">Wikipedia</a>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句