CSS :hover text-decoration: 下划线在 Safari 上不起作用

Question

我有一个问题，在 :hover 我的标签应该带有红色下划线，但这似乎不会在 Safari 浏览器上发生。

这是它在 Chrome 浏览器上的显示方式，但在 Safari 上它不会呈现红色下划线。

HTML代码

<div class="container bot-category">
<div class="row text-center my-5">
   
    <div class="col">
        <a class="btn btn-outline-success btn-floating m-1" href="{% url 'bots' %}" role="button" >View all</a>
    </div>
    <div class="col">
        <a class="btn btn-outline-dark btn-floating m-1" href="{% url 'support' %}" role="button">Read FAQs</a>
    </div>
    <div class="col">
        <a class="btn btn-outline-dark btn-floating m-1" href="" role="button">Botbrary</a>
    </div>
    <div class="col">
         <a class="btn btn-outline-dark btn-floating m-1" href="{% url 'bots' %}" role="button">Scripts</a>
    </div>  
    </div>     
</div>

CSS 代码

.bot-category a:hover{
background-color: black !important; 
text-decoration: underline 2px solid #f4364c !important; 
color: white !important;
-webkit-decoration:  underline 2px solid #f4364c !important;

}

Answer 1

你可以试试下面这段代码。

.bot-category a:hover{
   background-color: black !important; 
   text-decoration: underline 2px solid #f4364c !important; 
   color: white !important;
   -webkit-text-decoration-line:  underline !important;
   -webkit-text-decoration-color: #f4364c !important;
   -webkit-text-decoration-style: solid !important;
   -webkit-text-decoration-thickness: 2px !important;
}