vue-router : how to remove underline from router-link

Question

This results in an underlined link:

<li><router-link to="/hello">Hello</router-link></li>

My understanding is that the router-link element generates an a tag.

I've tried these things in the CSS:

router-link{
    text-decoration: none;
}

router-link a{
    text-decoration: none;
}

router-link a{
    text-decoration: none !important;
}

..but unfortunately none of these work.

Winters · Answer 1 · 2021-09-23T12:11:29.210

44

If anyone using Vuetify comes across this question, note that the styling below do not work due to Vuetify's in built styles. You must instead use inline CSS styling:

<router-link
 style="text-decoration: none; color: inherit;"
 to="/hello">

edited Sep 23 '21 at 12:11

answered Apr 22 '20 at 03:06

Winters

980
3
11
16

score 29 · Answer 2 · edited Mar 02 '21 at 11:31

29

It is Converted into <a ...
So to remove the underline try this

a { text-decoration: none; }

edited Mar 02 '21 at 11:31

live2

3,771
2
37
46

answered Jun 04 '19 at 11:35

JPilson

1,075
11
10

This one worked for me. Thank you. I added a script to the vue. – No One Mar 12 '21 at 00:01

score 23 · Answer 3 · edited Apr 26 '19 at 16:14

23

You can try targeting the list item link like this:

li a {
    text-decoration: none;
}

edited Apr 26 '19 at 16:14

Derek Pollard

6,953
6
39
59

answered Jun 28 '17 at 16:59

Emma Earl Kent

498
5
12

score 15 · Accepted Answer · answered Jun 28 '17 at 16:54

15

Vue component tags don't generate HTML tags.
Look in the DOM inspector to see what HTML tags actually exist.

You need to use regular classnames.

answered Jun 28 '17 at 16:54

SLaks

868,454
176
1,908
1,964

6

Ah, I see what you're talking about. The `router-link` turns into an `a`. `li a { }` in CSS seems to work. Thanks. – rpivovar Jun 28 '17 at 16:57

score 14 · Answer 5 · answered Nov 19 '19 at 12:29

14

You can use the tag prop of router link to use the li css class like this:

<li><router-link tag="li" to="/hello">Hello</router-link></li>

The link will now use li css propertys but still work as like a normal router link.

answered Nov 19 '19 at 12:29

alexcodes

404
3
11

score 9 · Answer 6 · answered Mar 05 '20 at 17:18

9

Add a class to router-link tag:

<router-link class="routerLink" to="/hello">Hello</router-link>

Then give css to the class:

.routerLink{
     text-decoration: none;
 }

This should work :)

answered Mar 05 '20 at 17:18

Nobin Jacob

91
2
3

score 2 · Answer 7 · answered May 06 '20 at 06:48

2

SCSS

div /deep/ .v-list a {
    text-decoration: none;
}

CSS

div >>> .v-list a{
    text-decoration: none;
}

answered May 06 '20 at 06:48

Kowayne Wynter

31
2

1

/deep/ is deprecated `[Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.` – Alex Montoya May 30 '20 at 20:12

score 2 · Answer 8 · answered Mar 29 '22 at 19:12

2

Even in React-Router. The Link tag makes the text underlined. Because any text (h1, h3, p) inside tag are converted to anchor tags so:

a{text-decoration: none;}

answered Mar 29 '22 at 19:12

amit.exe

81
1
2

score 0 · Answer 9 · answered Dec 29 '20 at 23:20

Although this answer seems quite obvious. I think my colleagues above forgot to mention that if you are using vuetify with the Laravel framework this problem can be solved as follows. Access:

resources\sass\app.scss file

And comment out the line:

@import '~bootstrap/scss/bootstrap';

This usually resolves this type of problem, which is actually a library conflict.

score 0 · Answer 10 · edited Feb 02 '22 at 07:18

0

If you are using Boostrap 5 you can use the class text-decoration-none

<router-link href="yourlink" class="text-decoration-none" >

</router-link>

see bootsrap documentation for reference. Just an additional information I am using Vue3 in my application

edited Feb 02 '22 at 07:18

Dharman

30,962
25
85
135

answered Feb 02 '22 at 07:13

Try In Incognito

51
3

vue-router : how to remove underline from router-link

10 Answers10

SCSS

CSS