vue-router: A guide to disabling the outline property of the CSS in router-link

I am having trouble disabling the outline of a css link element. I successfully disabled the outline of a regular link using a css class, but I am unable to do so with the <router-link> element. How can I disable the outline for this?

.page-link, .page-link:visited, .page-link:hover, .page-link:active, .page-link:focus {
    outline: 0 none !important;
    border: 0;
}

<div>
    <!-- It worked -->
    <a class="page-link">normal link</a>
</div>
<div>
    <!-- It did not work -->
    <router-link to="" class="page-link">router-link</router-link>
</div>

Browser:

Chrome
cssvue.jsvue-router

Answer №1

Give this a try:

.nav-link, .nav-link:visited, .nav-link:hover, .nav-link:active, .nav-link:focus {
  text-decoration: none !important;
  border: none;
}

<div>
  <router-link to="">
    <a class="nav-link">clickable link</a>
  </router-link>
</div>

Answer №2

Steer clear of using !important too often

.page-link, .page-link:visited, .page-link:hover, .page-link:active, .page-link:focus 
{
  outline: unset;
  border: unset;
}

<router-link to="" class="page-link">router-link</router-link>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the dimensions of an SVG element using CSS within an li element's ::before pseudo-element

I'm working on a list where SVGs are loaded as list items. How can I adjust the height and width of the ::before pseudo-element to be 30px x 30px? Setting the height and width directly didn't work for me. Can someone assist with this? <div cl ...

htmlcss

Understanding the Vue lifecycle methods for updating Vuex state

Utilizing Vue and Vuex components, the code within my component consists of: computed: { ...mapState({ address: state => state.wallet.address }) }, The functionality operates smoothly in the user interface. However, my objective is to invoke a ...

javascriptvue.jsvuex

What could be causing my jQuery script to not load properly on the first attempt?

I have a jQuery script set up on this particular webpage just before the ending body tag. Here is the script: <script> $(document).ready(function(){ var demomain = $(".demo-bg section"); var demomainW = demomain.height()+ 150 ...

javascripthtmljquerycss

What is the recommended alternative for the outdated or non-standard "align" element in use?

Here is the code I am working with in HTML: <td align="center"> After running ReSharper in Visual Studio 2008, I received this error message: "Element 'align' is obsolete or nonstandard" Can someone please advise on the correct replac ...

htmlcsscenteralignment

Tips for centering links in the navigation bar on Bootstrap 5 when viewing in a small size

I had previously inquired about customizing the Bootstrap 5 navbar in this post: Adjust navbar height to be smaller and I received some helpful answers. Thank you to everyone who responded. However, I now have a follow-up question: I am interested in ch ...

cssbootstrap-5

Numerous objects come into view as you scroll

I found a code snippet online that animates items as they appear on scroll. However, the code only triggers animation for one item at a time. How can I modify the code to trigger the animation for all items? const observer = new IntersectionObserver(e ...

javascripthtmlcssanimation

Tips for transferring data between pages in VUE js using paths

I currently have two pages - an add page and an edit page. I am looking to transfer data from the edit page to the add page. When the save button is clicked in the edit page, it should redirect the user back to the add page with a URL of /test/admin/testin ...

javascriptvue.js

Layer one div background image over another div background image

My goal is to have the Mario image displayed on top of the background seen in the screenshot below. While I've managed to get it working, I'm struggling to center the Mario image properly over the background. Additionally, I would like to elimina ...

htmlcssimagebackground-image

Is there a way to achieve a similar outcome on my site?

Recently, I noticed a mouse-hover effect on two websites and found it quite appealing. https://i.sstatic.net/Ly0gP.png https://i.sstatic.net/oDe1i.png This is the specific effect that caught my attention. Can anyone provide me with insight on how to impl ...

javascriptphpjqueryhtmlcss

Troubleshooting issue with Leaflet map failing to load within Bulma tab component in Vue.js

I'm encountering an issue with loading a Leaflet map while using Vue.js in conjunction with Bulma tab components through Buefy. When the map is placed within a tab, it fails to load all tiles until the browser window is resized. On the other hand, i ...

vue.jstabsleafletbulmabuefy

What is the best way to submit a form using Vue Axios in combination with Symfony 4

Need help! I am struggling with sending data from my Vue app to Symfony using axios. Even though I try to send the data, the Symfony request doesn't seem to receive it. Check out my controller code below: $form = $this->createForm(TeacherType::cl ...

symfonyvue.jsvuejs2axios

"Multiple instances of the same image are being copied across different form inputs that are generated dynamically

My challenge involves a form where users can add multiple images, and I'm working on dynamically creating new image input fields when the addItemForm is triggered. To achieve this, I utilize a v-for loop to iterate through all the items in the form. W ...

imagevue.jsvuejs3

Vue not displaying information from API calls

After developing my own backend API, I encountered a strange issue. When I test the API on Chrome, it functions perfectly fine. However, when I attempt to consume the API using Axios in Vue, no data is returned. axios.get('http://192.168.149.12:8888/ ...

jsonapivue.jsgoaxios

Techniques for Sending Data to Child Components in Vue.js

As a newcomer to Vue.js, I am attempting to pass a value to a child component within the framework. The HTML structure is as follows: <div id="example"> <my-component v-bind:data="parentData"></my-component> </div> To achieve ...

vue.jsvuejs2vue-component

Vue.js: When Props Become Undefined

After running this code, the output shows "undefined". Child component export default { porps: [ 'idx' ], mounted () { console.log(this.idx) }, } //BambooPage.vue Parent component <template> <div class="bamboo"& ...

vue.jsvue-componentvue-props

Ensure that the nested div maintains its height consistently across all three columns

In my layout, I am trying to achieve uniform height for three columns, each containing the same sections like title and address. Not only do I want the cards to have the same height, but also the nested sections should maintain equal heights. For instance, ...

javascripthtmlcssflexboxcss-grid

Explain the concept of paragraph spacing in Word, including how it is

When working with my ms word 2010 document, I often use the includetext-function to incorporate HTML content: { INCLUDETEXT "test.html" } Here is an example of the HTML code that I am trying to include: <html> <head> <meta http-equiv="Co ...

htmlcssms-wordparagraph

The mobile navigation bar may not display correctly on certain iPhones and iPads

Currently using a custom theme on Prestashop 1.6 where minor changes have been made to the CSS file, focusing mostly on colors and fonts. Interestingly, the mobile menu functions flawlessly on Android devices that were tested. However, some Apple devices s ...

cssiphoneipadmenuprestashop

Changing the cursor to a waiting state following a mouse click

Looking for some help here - when I click a button, the cursor remains standard and doesn't show loading. Any suggestions on how to fix this? Below is the snippet of my code: <div class="signup"> <input type="submit" value="Sign Up" tit ...

css

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

htmlcss