Text-decoration: underline vs border-bottom

Ответ 1

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

Ответ 2

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

Смотрите: Text-Decoration vs. Border-Bottom

Ответ 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
--------------------

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

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

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

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

Ответ 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;
}

Ответ 7

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

• Интервал между текстом и подчеркиванием
• Стиль подчеркивания (пунктирный, пунктирный, сплошной, градиент, изображение)
• Толщина
• Переходы/анимации CSS
• Разделение цвета между текстом и подчеркиванием

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

Теперь, когда переменные CSS теперь отправляются в каждом крупном браузере, таблица стилей "reset" может выглядеть примерно так:

: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);
}

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