Question

I’ve a link as shown in image bellow

What I want is to do, is apply

text-overflow: ellipsis; 

so in this case the word “Page” will be replaced by ellipsis, but still having the arrow, which is an :after element of the link.

Link code is this:

.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

Regarding your last comment you can do the following:

Declare position:relative on the link’s parent div and position:absolute on the link’s pseudo-element to make it independent from the a and its declared overflow:hidden. Adjust the position accordingly and everything should be fine.