小写字母没有下划线

Question

我希望链接中没有下划线的小写字母。这似乎很棘手。我尝试用＆＃34; span＆＃34;来解决它。或者我必须以另一种方式做到这一点？

.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> 

比我想的更容易吗？

Answer 1

第一个解决方案，使用: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。

Answer 2

相反，你可以伪造边框：

.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/

Answer 3

怎么样，

.lowercase{
    text-decoration: none;
}