Link with icon ::before where icon should have no underline - display: inline-block is no option?

Question

My link should look like this:

> My link text
  ____________

while "My link text" should be underlined and the content in the ::before part should not be.

I tried it like this:

a {
   text-decoration: underline;
}

a::before {
   content: ">";
   text-decoration: none;
}

But no success. It's always underlined. What can I do?

EDIT: One answer was, that I should simply add display: inline-block to the ::before part. BUT the problem I am getting with this is, that the links breaks somethimes after the icon. I definitly need to avoid that. And the solution I have found for that is to REMOVE the display: inline-block. So, for the one or the other I need another solution. display: inline-block is not the right one.

display:inline-block to before – Temani Afif Sep 22 '20 at 13:22 — Temani Afif, Sep 22 '20 at 13:22
Add `float:left` to `a::before{.....}`. – Rayees AC Sep 22 '20 at 13:25 — Rayees AC, Sep 22 '20 at 13:25

score 0 · Answer 1 · answered Sep 22 '20 at 13:24

0

Setting display: inline-block on the pseudo element (::before) will allow it to not inherit the text-decoration.

See https://codepen.io/RonnyO/pen/vYGvNWp?editors=1100

Already explained in detail elsewhere.

answered Sep 22 '20 at 13:24

Ronny

4,295
2
24
30

1

*Already explained in detail elsewhere.* --> for this particular reason we need to close question as duplicate (you have enough reputation to do it) – Temani Afif Sep 22 '20 at 13:29
Correct, after I've answered I looked it up and you beat me to the closing vote :-) – Ronny Sep 22 '20 at 13:57
Please see my edit note as well. The problem is not solved – JonSnow Sep 22 '20 at 14:52

Link with icon ::before where icon should have no underline - display: inline-block is no option?

1 Answers1