html - 没有下划线的小写字母

Question

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

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