css - 如何在具有 :after pseudo element 的链接中使用省略号

Question

我有一个链接，如下图所示

我想做的就是申请

text-overflow: ellipsis; 

所以在这种情况下，单词“Page”将被省略号替换，但仍然有箭头，它是链接的 :after 元素。

链接代码是这样的:

.next-lesson:after{
background: url("img/icons.png") no-repeat -9px -91px;
display: inline-block;
background-repeat: no-repeat;
width: 15px;
height: 15px;
content: "";
margin-left: 5px;
}

Answer 1

关于您的最后一条评论，您可以执行以下操作:

在链接的父 div 上声明 position:relative 并在链接的伪元素上声明 position:absolute 以使其独立于 a及其声明的 overflow:hidden。相应地调整位置，一切都应该没问题。