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的“移动”视图工作。根本没有在移动设备上的任何链接上显示下划线。

Answer 1

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

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

我的文字修饰（下划线）未显示在手机上

1 个答案: