текстовое оформление: подчеркивание против границы

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

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

См .: Текстовое оформление против границы снизу

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

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

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

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

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

Answer 5

Попробуйте эту границу с изображением 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 6

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

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

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

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

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

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

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

Answer 7

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

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

Во многих случаях большинство этих способностей не понадобятся, но хорошо, что они доступны! Я переключился на использование 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);
}

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