CSS span hover not working

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>

solution

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

enter image description here

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>