Changing <A> Link Underline Color

Changing a link underline color

If what you mean is a different underline color than what the text is, the only thing I can think of is to add a span around the link:

<span class='underline'>
    <a href="#">this just<br>a test<br>of underline color</a>
</span>

And then the CSS:

span.underline { 
    color: red; 
    text-decoration: underline; 
} 
span.underline a { 
    color: blue; 
    text-decoration: none; 
} 

And you get what you want.

EDIT:

Testing this a little further, it is not working for me on IE. If you add border-bottom, however, it surprisingly does work in all browsers, except that IE does not put a border under the last one. I will try to dig a little deeper to see if there's a cross-browser way to do this...

Changing Underline color

No. The best you can do is to use a border-bottom with a different color, but that isn't really underlining.

Remove blue underline from link

You are not applying text-decoration: none; to an anchor (.boxhead a) but to a span element (.boxhead).

Try this:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Change link underline color & not font color (bottom-border is not working across all browsers)

The issue is the size of your border. Change your 0.5px border to 1px instead and it will work. Live example: http://jsfiddle.net/tw16/WcrNA/

.content a {
    border-bottom: 1px solid #A80532; /* instead of 0.5px */
    color: #000022;
    text-decoration: none;
}

Directly changing default link underline color without CSS?

Add the styling to the <a> tag, not to the text inside it:

<p>This is the second paragraph. It is also short and boring. Let's create a 
link to the <a style="color: #3e3e3e" href="http://www.w3schools.com/tags/default.asp" 
onmouseover="this.style.textDecoration='none';
this.style.backgroundColor='#9400d3'; this.style.color='#ffffff';" 
onmouseout="this.style.textDecoration='underline';
this.style.color='#3e3e3e'; this.style.backgroundColor='';">
HTML Quick Reference List</a></p>

FIDDLE

Change links colors and underline color of html converted to AttributedString

If you are using a UITextView, it would be enough to set the tintColor to UIColor.red and remove the following:

let attributes: [NSAttributedString.Key: AnyObject] = [NSAttributedString.Key.foregroundColor: UIColor.red]
attributedString?.addAttributes(attributes, range: NSRange.init(location: 0, length: attributedString?.length ?? 0))

so it would look like this:

public func htmlStyleAttributeText(text: String) -> NSMutableAttributedString? {
    if let htmlData = text.data(using: .utf8) {
        let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html, NSAttributedString.DocumentReadingOptionKey.characterEncoding: String.Encoding.utf8.rawValue]
        let attributedString = try? NSMutableAttributedString(data: htmlData, options: options, documentAttributes: nil)
        return attributedString
    }
    return nil
}

//
textView.tintColor = .red
textView.attributedText = htmlStyleAttributeText(text: "random text <a href='http://www.google.com'>http://www.google.com </a> more random text")

Output:

Ckeditor 4 - how can I change the color of the link including underline?

I found the solution. Here is my code:

  editor = CKEDITOR.inline(editable_text_element)

  # This event called when text is updated in current editor.
  editor.on 'change', ->
    links = iframe().find('a')
    links.each () ->
      current_link = $(this)
      links_children = current_link.children()

    # Our case is when <a> has only 1 child and this is <span>
    if links_children.size() is 1
      child = links_children.first()
      child_color = child.css('color')
      current_link_color = current_link.css('color')

      current_link.css('color': child_color) if current_link_color isnt child_color

This is not ideal but it works. I set color via style when text has changed.

Underlining an html anchor with different color

You cannot specify the underline color separately, but you can use a little trick:

a {
    color: red;
    text-decoration: none;
    border-bottom: 1px solid green;
}

Note that the border will not appear exactly where the underline would have appeared, sorry.

---

Related Topics