在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

如果您希望所有浏览者都支持红色下划线，则应使用text-decoration-color之外的其他方式执行此操作。如您所见，IE和Edge不支持此功能。您可以使用::after伪元素并使用例如border彩色red

设置样式来执行此操作