Search code examples
htmlcsshyperlinkunderline

Lowercase letters not having underlined

I want to have in a link the lowercase letters not having underlined. This seems to be tricky. I tried to solve it with a "span" or do I have to do it another way?

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

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

The HTML is the following:

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

Is it easier than I think?

Solution

  • Instead, you can fake the borders:

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

    Preview

    Fiddle: http://jsfiddle.net/praveenscience/qjw1Lc3z/