text-decoration: underline vs border-bottom

Question

В чем разница в использовании {text-decoration: underline} и {border-bottom: ...}?

который легко стильный и кросс-браузер совместимый?

, когда мы должны использовать border-bottom более text-decoration: underline?

Хорошо бы использовать border-bottom всегда вместо text-decoration: underline?

Answer 1

border-bottom строит линию внизу блока элементов. text-decoration:underline делает текст подчеркнутым. Точная разница зависит от используемого HTML и текстового макета, но в целом, если вы хотите подчеркнуть текст, а затем подчеркните его.

Answer 2

bottom-border позволяет управлять расстоянием между текстом и подчеркиванием, поэтому его более универсальный. И (как упоминалось выше), он позволяет различный цвет подчеркивания (хотя я не вижу причины, почему вы захотите это сделать).

text-decoration более «правильный», потому что это «реальное» свойство CSS, предназначенное для подчеркивания текста.

Если вы установили text-decoration: underline для всех ссылок, вам нужно будет установить text-decoration: none для специальных ссылок, которые вам не нужны. но если вы используете border-bottom вместо этого, вы сохраните одну строку кода CSS (укажите, что вы установили text-decoration: none в свой сброс CSS.

так что в целом, я проголосую за border-bottom, если у вас сложная компоновка с различные стили для каждого звена, но text-decoration для простого веб-сайта закодированной «по книге».

Answer 3

Как сказал Игнасио, border-bottom поставит линию в нижней части контейнера коробки, в то время как text-decoration:underline будет на самом деле подчеркнуть текст. Это становится важное значение для многострочных строк.

I am a single line and will look similar for both methods 
--------------------------------------------------------- 

, вероятно, сделает то же самое для обоих стилей, но вы получите следующее для многострочных строк.

I am a string that has been 
split and added a border-bottom 
------------------------------- 

I am a string that has been 
--------------------------- 
split and underlined 
-------------------- 

Извиняюсь за помощью кода форматирования, а не должным образом разрывая эти примеры, но вы можете видеть точку я пытаюсь сделать.

Answer 4

Прошу прощения, но некоторые ответы здесь вводят в заблуждение. Разделение строки текста не помещает границу в нижней части всего блока из-за характера встроенных блоков. Границы под ссылками на самом деле более согласованы между браузерами, чем текстовое оформление: подчеркивание.

См: Text-Decoration vs. Border-Bottom

Answer 5

настройки текста для отображения инлайн (на самом деле, это должно быть то, что по умолчанию) приведет к границе дна, чтобы сделать много, как правило, текст-украшения.

однако, я полагаю, что вы хотите использовать эту технику на ссылки, выполнив следующие действия:

/* my super eye catching dual colour link */ 
a { 
    color:black; 
    border-bottom:1px solid red; 
} 

что все хорошо, но вы обнаружите, что там, где у вас есть IMG тег внутри ссылка, изображение будет иметь красную рамку под ним.

Если вы можете определить способ нацеливания родителя элемента страницы (изображения) с использованием существующих селекторов и без javascript, я куплю вам пиво, но я не думаю, что вам повезет.

с помощью «text-decoration» позволяет избежать этой проблемы вообще, поскольку изображение явно не является текстом, оно не будет отображать подчеркивание, если внутри ссылки.

Если у вас есть полный контроль над вашей разметкой, я полагаю, вы можете пропустить свой путь путем добавления классов к каждой ссылке, но если вы работаете с любой популярной системой CMS, вы будете бороться с этой идеей.

Answer 6

Попробуйте эту границу с 1px изображением

a:hover { 
    background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent; 
    background-color: transparent; 
    background-image: url("img/bg-link-hover.png"); 
    background-repeat: repeat-x; 
    background-attachment: scroll; 
    background-position: 0px 92%; 
    background-clip: border-box; 
    background-origin: padding-box; 
    background-size: auto auto; 
} 

Answer 7

В то время как всегда будут иметь место случаи, когда один является более подходящим, чем другой, border-bottom предлагает гораздо более точный контроль над text-decoration и поэтому, вероятно, предпочтительным способом. Вот быстрый (вероятно, не исчерпывающий) перечень свойств, которые border-bottom могут контролировать/включить, что text-decoration не может:

1. Расстояние между текстом и «подчеркивание»
2. стиль «Подчеркивание» (пунктир, пунктирная, сплошная, градиентная, изображение)
3. Толщина
4. CSS переходы/анимация
5. Разделение цвета между текстом и «подчеркивание»

Во многих случаях большинство этих способностей не понадобятся - но хорошо иметь их в наличии! Я переключился на использование border-bottom в первую очередь для возможности поместить несколько пикселей отступов между текстом и подчеркиванием; следующее наиболее распространенное использование, которое я нашел, - это разведение цвета подчеркивания из цвета текста.

С CSS переменные в настоящее время судоходство в каждом главном браузере, «перезагрузка» таблица стилей может выглядеть примерно так:

:root { 
    --link-color: blue; 
    --hover-color: purple; 
    --underline-color: var(--link-color); 
} 

a { 
    color: var(--link-color); 
    text-decoration: none; 
    border-bottom: 1px solid var(--underline-color); 
} 

a:hover { 
    color: var(--hover-color); 
    border-bottom-color: var(--hover-color); 
} 

Таким образом, ссылки будут отображаться как ожидается, на основе «по умолчанию», но по-прежнему позволяют для настройки по мере необходимости.