Remove text decoration from child element in anchor tag

Lot of time we come across this problem where you have to remove text decoration from a child element or a nested element inside an anchor tag.

Problem to remove text decoration from child element

This problem mostly occur when you have globally defined the anchor element properties like this

Now let us take the mark up below which has a strong and a small element nested inside an anchor tag

For the above anchor tag you want to underline only the strong element but not the small element. You would be using the style like this.

Here is a fiddle to test the above code and notice the problem. When you hover the anchor element, even the small element is getting underline. You do not want that, huh.

Solution to remove text decoration from child element

Here is the solution.

If would try the above solution with just text-decoration:none with an important it would still not work.

Setting the display property of small element to inline-block is the solution.

This makes me wonder why and how, as a small element already has the display property set to inline-block by default but may be when you set the text-decoration to an anchor element, the child element get the has layout behavior.

I am setting the width of small element to 100% as it might come inline with the strong element on hover if it was not set to block.

Here is the fiddle to check the solution 

If you think solution helped you and saved some time, kindly comment and share.