Mix the anchor underline style with the inline element

Question

I noticed that if an element, such as span or p, has an inline block display, then it will cover the anchor underline style when it is placed inside.

<a href="http://www.stackoverflow.com"><span style="display:inline-block">test</span></a> <a href="http://www.stackoverflow.com"><p style="display:inline-block">test</p></a> 

Is there any way to prevent this?

Answer 1

add text-decoration:inherit; to the style tag text-decoration:inherit;

Answer 2

1) Move the style to the tag

 <a href="http://www.stackoverflow.com" style="display:inline-block">test</a> 

or

2) Add an underline to the child

 <a href="http://www.stackoverflow.com"><p style="display:inline-block;text-decoration:underline">test</p></a> 

Answer 3

Add the following style:

 ​a *:hover { text-decoration: underline }​ 

Demo