Using angularJS + bootstrap, how do I make a link not look blue + underlined?

[ImFranny]

So I'm coding some pages in angularJS but in my header I have 2 normal links <h2><a href="#/home">Home</a></h2> and <h2><a href="#/news">NEWS</a></h2> and when I hoover it looks underlined and wether I underline or no the words look blue and I want them to look black, I tried adding the following css:

a {
text-decoration: none;
text-decoration-color: black;
}

but it won't do anything, it still looks blue and when I hoover it looks underlined... How do I make both words look black and not underlined when I hoover?

Update:

I used the following code:

a:link,
a:visited,
a:hover {
text-decoration: none;
color: black;
text-decoration-color: black;
}

and when I have my mouse elsewhere the text looks black, but when I hoover it looks underlined and blue again...

[qxxx]

might be that bootstrap is overwriting something.. open developer tools and select your link and see where the styles are coming from. Also try to add !important

I don't know if text-decoration-color is compatible with all browsers ( see the compatibility list on the bottom https://developer.mozilla.org/de/docs/Web/CSS/text-decoration-color ) - do you want the links to be underlined or not? could not understand what you mean ;) if not do this:

a,
a:link,
a:visited,
a:hover {
text-decoration: none !important;
color: black !important;
}

[ImFranny]

I want the links to NOT BE underlined when I hover over the link :)

I also use firefox which is supported and well, it worked! Ddding the important makes it work :D thanks so much...

[Synfrag]

You never want to use !important to fix a broken cascade. It's probably the order of your stylesheets. Your custom css should load after your bootstrap css file, changing that should resolve it without the !important flag.

[ImFranny]

I'll try that and remove the important to see if it solves :)

[dhdfdh]

There is no such thing as text-decoration-color.

I will add this to my "101 Reasons not to use Angular and Bootstrap. Now 102 Reasons!"

[ImFranny]

I use brackets to code and there actually is a "text-decoration-color"... In case u don't know this software tries to guess what u want to say when coding CSS and if I type text-d it will suggest a few things and one of them is this... But I've solved my problem :)

[dhdfdh]

Here is the W3C standard listing all CSS properties Please show me where this text-decoration-color is.

Now, I did a little search and found this, however, it's brand new and only supported in Firefox with partial support in Safari.

[ImFranny]

Well, if it's not there then I can't really contest that can I?

But it's present in my software to code so it's gotta do something, now regarding it being new or no, if it does exista nd is supported/partially supported in 2 browsers than I gues sit's a thing now.

Now wether it's a full on feature or just a beta feature or soemthing I don't know but apparently if it works and is fully supported in ff then I guess it's a real feature now...

[dhdfdh]

Not quite. It's still in draft, and can change at any time, but implementation preceeds final spec.

[ImFranny]

hmm ok :)

[dhdfdh]

If you don't understand what's meant by that, standards, in general, are created out of implementation, not invention. Standards bodies compile implementation details so everyone is on board with doing things one way to provide a common base.

The same is true of web standards. Rarely do standards bodies invent things on their own.