Cannot Remove Underline From Vue router-link

Question

I think I tried almost everything trying to remove underline from router-link.

This is my code:

<router-link :to="{name: 'Plan'}">
   <div>Plan Your Trip</div>
      <div class='expander'>
      <router-link :to="{name: 'Plan'}">COVID-19</router-link>
      <router-link :to="{name: 'Plan'}">Visa</router-link>
      <router-link :to="{name: 'Plan'}">Essentials</router-link>
   </div>
</router-link>

I'm trying to remove underline from sub-links only.

Things I've tried:

In-line style

<router-link style="text-decoration: none !important;" :to="{name: 'Plan'}">COVID-19</router-link>

Assign class

<router-link class="sub-link" :to="{name: 'Plan'}">COVID-19</router-link>

<style scoped>
   .sub-link{text-decoration: none !important;}
</style>

Declare tag

<router-link tag="div" :to="{name: 'Plan'}">COVID-19</router-link>

<style scoped>
   div{text-decoration: none !important;}
</style>

Assign seperate tag + Declare class for that tag

<router-link :to="{name: 'Plan'}">
   <div class="sub-link">COVID-19</div>
</router-link>

These are just few lists, I literally tried every possible methods I can think of... Am I missing something about customizing Vue router-link?

Can you inspect that element in DOM and post that snip? It is working here https://jsfiddle.net/kxec8s0L/ — Sowmyadhar Gourishetty, Aug 21 '20 at 16:38
Yes, I already tried that as well. There's the screenshot. http://prntscr.com/u3lvix. I don't know why there's empty 'class' declared in DOM though? — passionateLearner, Aug 21 '20 at 16:47
`.expander a { text-decoration: none !important}` Can you try this css once — Sowmyadhar Gourishetty, Aug 21 '20 at 16:50
No luck on that as well :( But frankly, other declared styles are working though...? Just not 'text-decoration'... http://prntscr.com/u3lzui — passionateLearner, Aug 21 '20 at 16:53
Out of curiosity, when is this underline occuring? on hover? — Tony, Aug 21 '20 at 16:57
Yea.... I spend well over an hour on this :*( I tried many other methods as well like: decaring global css from App.js, v-bind:style, etc... — passionateLearner, Aug 21 '20 at 16:59
I didn't set it to happen on any event. It's just a default behavior. I just removed default color and set it to 'white'. — passionateLearner, Aug 21 '20 at 17:00
Please check the browser dev tools. Click on the `Elements ` tab and switch from `Styles` to `Computed`. I have a feeling that a style is overriding it. It seems that you use the `important` keyword a few times. — Tony, Aug 21 '20 at 17:01
Accepted answer has resolved the issue. It's really weird.. but thanks all :) — passionateLearner, Aug 21 '20 at 17:09

Sphinx · Accepted Answer · 2020-08-21T17:22:10.727

Uses display: inline-block;text-decoration:none;, the trick is display: inline-block;.

Css spec states

For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Example: The link COVID-19 in your codes will remove the underline.

<router-link :to="{name: 'Plan'}">
   <div>Plan Your Trip</div>
      <div class='expander'>
      <router-link :to="{name: 'Plan'}" style="display: inline-block;text-decoration:none;">COVID-19</router-link>
      <router-link :to="{name: 'Plan'}">Visa</router-link>
      <router-link :to="{name: 'Plan'}">Essentials</router-link>
   </div>
</router-link>

Below is one demo:

let Layout = {
  template: `<div>
  <h4>Layout Page </h4>
  <router-link to="/contact">
  <div>
    <p>Links<p>
    <router-link to="/contact/add" style="display: inline-block;text-decoration:none;">Add1</router-link>
    <router-link to="/addcontact">Add2</router-link>
  </div>
  </router-link>
  <router-view></router-view>
  </div>`
};
let Home = {
  template: '<div>this is the home page. Go to <router-link to="/contact">contact</router-link> </div>'
};

let ContactList = {
  // add <router-view> in order to load children route of path='/contact'
  template: '<div>this is contact list, click <router-link to="/contact/add">Add Contact In sub Router-View</router-link> here to add contact<p><router-view></router-view></p> Or Click <router-link to="/addcontact">Add Contact In Current Router-View</router-link></div>'
};

let ContactAdd = {
  template: '<div>Contact Add</div>'
}

let router = new VueRouter({
  routes: [{
    path: '/',
    redirect: 'home',
    component: Layout,
    children: [{
        path: 'home',
        component: Home
      },
      {
        path: 'contact',
        component: ContactList,
        children: [{
          path: 'add',
          component: ContactAdd
        }]
      },
      {
        path: 'addcontact', // or move ContactAdd as direct child route of path=`/`
        component: ContactAdd,
      }
    ]
  }]
});

new Vue({
  el: '#app',
  components: {
    'App': {
      template: '<div><router-view></router-view></div>'
    },
  },
  router
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<section id="app">
  <app></app>
</section>

This worked! Thanks! Could you please explain how this approach worked? — passionateLearner, Aug 21 '20 at 17:09
[Css spec](https://www.w3.org/TR/CSS2/text.html#lining-striking-props) states underline will not be applied for inline block whose parent element already been set `text-decoration: underline` — Sphinx, Aug 21 '20 at 17:18

Tony · Answer 2 · 2020-08-21T16:50:45.893

When you inspect the DOM for a router-link, you see that it's an a tag. Bear in mind, that even when the initial underline is removed, there is an underline that happens when you hover over the router link text.

Using this snippet

<router-link :to="{name: 'Plan'}">
   <div>Plan Your Trip</div>
      <div class='expander'>
      <router-link :to="{name: 'Plan'}">COVID-19</router-link>
      <router-link :to="{name: 'Plan'}">Visa</router-link>
      <router-link :to="{name: 'Plan'}">Essentials</router-link>
   </div>
</router-link>

.expander a {
  text-decoration: none;
}

.expander a:hover {
  text-decoration: none;
}

score 0 · Answer 3 · answered Aug 21 '20 at 17:01

The outer router-link is applying text-decoration: underline to its inner-text and the inner router-links are also applying text-decoration: underline to their inner-text.

You essentially have double underlines applied to your inner router-links at the moment.

You need to remove it from both. If you need another element to have text-decoration: underline then set it for that element separately.

Cannot Remove Underline From Vue router-link

3 Answers3