Строчные буквы без подчеркивания

Question

Строчные буквы без подчеркивания

0

Я хочу иметь в ссылке строчные буквы, не подчеркнутые. Это кажется сложным. Я пытался решить это с помощью "span" или мне нужно сделать это по-другому?

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

Это проще, чем я думаю?

Cyrill 25 авг. 2014, в 22:53

Источник

3

Нравится?
potashin 25 авг. 2014, в 20:10
0

Кстати, вы никому не назначаете свой класс .text . Это может решить вашу проблему.
the_pete 25 авг. 2014, в 20:10
1

@Notulysses опубликовать его как ответ;)
Alex Char 25 авг. 2014, в 20:15
0

Все буквы в вашем публикуемую кода в нижнем регистре.
Hashem Qolami 25 авг. 2014, в 20:20
0

Нижняя граница не совпадает с подчеркиванием. Возможно, лучше, но это не одно и то же. И опубликованный код не показывает усилий по предотвращению подчеркивания по умолчанию.
Jukka K. Korpela 25 авг. 2014, в 20:47

Показать ещё 3 комментария

Теги:

html

css

css3

hyperlink

underline

3 ответа

2

Первое решение, используя :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

(Возможно) Вы также можете найти полезное свойство CSS text-transform которое вы можете увидеть здесь.

potashin 25 авг. 2014, в 18:05

0

Не работает в старых браузерах! :(
Praveen Kumar Purushothaman 25 авг. 2014, в 20:18
1

Благодарю вас! Большой!
Cyrill 25 авг. 2014, в 21:14

0

как насчет,

.lowercase{
    text-decoration: none;
}

Be0wulf 25 авг. 2014, в 18:43

Ещё вопросы

Кстати, вы никому не назначаете свой класс .text . Это может решить вашу проблему.
@Notulysses опубликовать его как ответ;)
Все буквы в вашем публикуемую кода в нижнем регистре.
Нижняя граница не совпадает с подчеркиванием. Возможно, лучше, но это не одно и то же. И опубликованный код не показывает усилий по предотвращению подчеркивания по умолчанию.
Не работает в старых браузерах! :(

Praveen Kumar Purushothaman · Accepted Answer · 2014-08-25T17-13-00.000Z

Вместо этого вы можете подделывать границы:

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

Благодарю вас! Работает отлично - и легко ... @ Хашем, ты прав, все мои буквы в нижнем регистре ... Глупый я.
@CyrillKuhlmann Конечно, примите ответ, если он работает! :)