用Safari中的jQuery修改``text-decoration-color''

Question

我有一个元素：

$('.myElement').click(function () {
  $('.myElement').css('text-decoration-color', 'red')
});

.myElement {
width: 200px;
height: 200px;
font-size: 16px;
text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="myElement">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla ultrices hendrerit. Vestibulum eget volutpat ante. Proin quis elit molestie, lacinia purus a, vulputate purus.</textarea>

该片段具有动画，因此，当您单击它时，下划线会变成红色。这在Chrome中起作用，但在Safari中不起作用。有人知道为什么，以及如何使它起作用吗？

谢谢！

Answer 1

尝试使用前缀-webkit。如果没有所有浏览器的前缀，它就无法完全支持。https://caniuse.com/#search=text-decoration-color

如果您想具有所有browesers支持的红色下划线，则应以其他方式以其他方式来使用text-decoration-color。如您所见，在IE和Edge中不支持它。您可以使用::after伪元进行此操作，并以border彩色red