CSS span hover not working

Question

I want to show the dotted line when mouse hover the link, this method doesn't work.

.text-link {
  color: #446CB3;
  font-family: "Tahoma";
  font-size: 15px;
 text-decoration:none;
}
.text-link:hover {
  text-decoration-style: dotted;
}

<a href="URL" target="_blank" data-role="none">
  <span class="text-link">Click me</span>
</a>

Answer 1

It doesn't look like text-decoration-style: dotted is supported in all browsers:

For full support, you could use border-bottom-style: dotted.

In order for this to work, you need to remove the underline from the anchor element using text-decoration: none. Then just add a border-bottom to the element:

a {
    text-decoration: none;
}
.text-link {
    color:#446CB3;
    font-family:"Tahoma";
    font-size:15px;
    border-bottom: 1px solid;
}
.text-link:hover {
    border-bottom-style: dotted;
}

<a href="URL" target="_blank" data-role="none"><span class="text-link">Click me</span></a>