html - 我的文本修饰(下划线)未在移动设备上显示

Question

我有一个手动添加下划线的链接列表(不使用默认链接下划线)。它适用于 chrome devtools 移动预览，但当我在实际移动设备上部署和查看时，下划线不存在。

我已经使用了内联样式和 css，并且尝试将 !important 添加到下划线样式。

在 .js 文件中

<Link  className="BigNames-link" to='/Adobe' style={{textDecoration:'none'}}>
                    <span style={{textDecoration: 'underline #101010  !important'}} className='Name'>Adobe Creative Cloud</span>
                    <span style={{textDecoration: 'underline #101010  !important'}} className='Text'>: App Banner</span>  <img src={Lock} alt="..."className="Lock"></img>
                </Link>
                <Link className="BigNames-link" to='/Wacom'>
                    <span style={{textDecoration: 'underline #101010  !important'}} className='Name'>Wacom</span>
                    <span style={{textDecoration: 'underline #101010  !important'}} className='Text'>: Product Launch Emails</span>  <img src={Lock} alt="..."className="Lock"></img>
                </Link>

在css文件中

.BigNames span{
    text-decoration: underline #101010  !important;
}

再一次，它完全按照我想要的方式工作。看起来它应该根据 devtools“移动” View 工作。它根本没有在移动设备上的任何链接上显示下划线。

Answer 1

因为你上错课了。您使用 .BigNames 类而不是 BigNames-link 类。试试这个:

.Name, .Text{
text-decoration: underline #101010  !important;
}