【问题标题】:How do I achieve this style of underlined link?如何实现这种带下划线的链接?
【发布时间】:2015-02-28 23:34:14
【问题描述】:

我不想知道如何突出显示或下划线。

我想知道这是怎么做到的:

我第一次看到 Wired 在 Chrome 内的 Android note 3 上使用了此功能。

【问题讨论】:

    标签: hyperlink highlight underline


    【解决方案1】:

    访问 Wired 文章并使用 Web Inspector,我发现了创建此效果的 CSS 规则:

    a {
       border-bottom: 1px solid #cbeefa;
       box-shadow: inset 0 -4px 0 #cbeefa;
       color: inherit;
       text-decoration: none;
    }
    

    以下是这些规则的实际应用示例:

    a {
      border-bottom: 1px solid #cbeefa;
      box-shadow: inset 0 -4px 0 #cbeefa;
      color: inherit;
      text-decoration: none;
    }
    This is <a href="http://google.com">a link to Google</a>.
    
    Another link goes <a href="http://stackoverflow.com">to the Stack Overflow homepage</a>.

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-01-17
      • 2013-11-01
      • 1970-01-01
      • 2013-11-10
      • 2010-10-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多