tijs Posted January 28, 2015 Share Posted January 28, 2015 Good evening everybody, I have a little problem, I've read on the site from w3-schools that I can use a text-decoration-color element to choose a color for the text-decoration (:underline;) Now, I tried it out but it won't work. #google:link{color:red; text-decoration:underline; text-decoration-color: green;} Thanks for watching! Tijs Link to comment Share on other sites More sharing options...
Ingolme Posted January 28, 2015 Share Posted January 28, 2015 Here's the page about it: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp It's not supported by any browser. It will only work in Firefox if you put the -moz- prefix: -moz-text-decoration-color: green; Link to comment Share on other sites More sharing options...
tijs Posted January 28, 2015 Author Share Posted January 28, 2015 (edited) Ok but in my chrome it won't work also.. Is there also another manner to do it? I wanna get a effect like this but then with the underline in another color: http://craftnodehosting.com/ Edited January 28, 2015 by tijs Link to comment Share on other sites More sharing options...
dsonesuk Posted January 28, 2015 Share Posted January 28, 2015 <a class="illusion" href="#"><span>this my link the text is red, underline is something completely different, its a border on a span</span></a> .illusion{text-decoration: none; color: red;} .illusion:hover span{ border-bottom: 3px solid lime;} Link to comment Share on other sites More sharing options...
tijs Posted January 29, 2015 Author Share Posted January 29, 2015 (edited) Ok thanks it worked! But if I place it in the navbar in bootstrap then it won't work, even if I just put another color, it has no effect.. <li class="active department"><a href="#"> Home </a> </li>.department{color:red;} Any solutions? Thanks a lot! (and by the way, does anyone know where I can learn more advanced styling like this? some tutorial or somthing?) Edited January 29, 2015 by tijs Link to comment Share on other sites More sharing options...
dsonesuk Posted January 29, 2015 Share Posted January 29, 2015 That probably is not working because the anchor has a color overiding the color applied to li with class 'department', that is why you use span, as it will be the same width to text, but! by using a border and not underline its color is not tied to the color used on anchor. Also it more than likely that the anchor link is a block element that fills the whole area of LI element, so applying a border to that will mean a border will appear at bottom inner edge of LI Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now