Miguel Antunes Miguel Antunes - 1 year ago 75
CSS Question

How can I use ellipsis in a link that have :after pseudo element

I've a link as shown in image bellow

enter image description here

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:

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download