How can I add text emphasis to links in Bootstrap?

Question

Bootstrap allows me to emphasize text in general through the use of the text-* class attribute on the <p> tag. However, when I nest a link inside, the link does not have the emphasis formatting applied (namely, color). Is there an attribute I could add to the anchor tag so that it will display the same emphasis as the <p> tag?

For example, the following code would have a green 'HW: Read this ' followed by a blue, underlined 'Link'

<p class="text-success"><strong>HW:</strong> Read this <a href="http://json.org/">Link</a></p>

Thank you in advance.

Answer 1

Inherit the color property for the anchor with this style:

.text-success a{
    color: inherit;
}

By default anchors do not inherit the color property of their parent.

JS Fiddle: http://jsfiddle.net/7ZFpr/1/

Answer 2

Wrap the content inside of the anchor tag with a span containing the text class.

Example:

<a href="#"><span class="text-danger">I'm a red link</span></a>