没有下划线的小写字母答案

【问题标题】：Lowercase letters not having underlined没有下划线的小写字母
【发布时间】：2014-10-19 01:17:37
【问题描述】：

我想在链接中包含没有下划线的小写字母。这似乎很棘手。我试图用“跨度”来解决它，还是我必须用另一种方式来解决它？

.text a:link {
    color: #FFF;
    border-bottom: solid 2px;
}

.lowercase {
    border-bottom:none !important;
 }

HTML 如下：

<a href="http://www.singbei.com" target="_blank">sin<span class="lowercase">g</span>bei</a>

比我想象的要容易吗？

【问题讨论】：

Like this?
顺便说一句，您没有将.text 类分配给任何东西。这可能会解决您的问题。
@Notulysses 将其发布为答案 ;)
您发布的代码中的所有字母都是小写。
下边框和下划线不一样。也许更好，但根本不是一回事。并且发布的代码显示没有努力防止默认下划线。

标签： html css hyperlink underline

【解决方案1】：

相反，您可以伪造边框：

.text {background-color: #000; padding: 15px;}

.text a:link {
  color: #fff;
  border-bottom: solid 2px;
  text-decoration: none;
}

.text a:link .lowercase {
  border-bottom: 2px solid #000;
}

预览

小提琴：http://jsfiddle.net/praveenscience/qjw1Lc3z/

【讨论】：

谢谢！完美 - 并且简单...@Hashem，你是对的，我所有的字母都是小写的...愚蠢的我。
@CyrillKuhlmann 当然，如果有效，请接受答案！ :)

【解决方案2】：

怎么样，

.lowercase{
    text-decoration: none;
}

【讨论】：

【解决方案3】：

第一个解决方案，使用:not() 选择器：

a > span:not(.lowercase ) { border-bottom: solid 2px; }
a { text-decoration:none; }

JSFiddle

第二种解决方案：

a span { border-bottom: solid 2px; }
a span.lowercase { border:none;}
a { text-decoration:none; }

JSFiddle

（也许）您还可以找到有用的text-transform CSS 属性，您可以在here 中看到它。

【讨论】：