Как сделать отступ underline
Обновлено: 04.07.2024
Используя CSS, когда text-decoration:underline применяется текст , возможно ли увеличить расстояние между текстом и подчеркиванием?
Это не совсем то, о чем вы просили, но это была интересная статья на эту тему: CSS Design: Custom Underlines
В CSS3 появилось много новых свойств для оформления текста. Пожалуйста, проверьте alligator.io/css/text-decoration Пример: text-underline-position: under; и text-decoration-skip: ink; Обратите внимание, что это, вероятно, не обратно совместимо со старыми браузерами.
Для многострочного вы можете заключить многострочный текст в промежуток внутри элемента. Например , insert multiline texts here то просто добавьте border-bottom и padding на - Demo
Моя единственная проблема с этим трюком - когда я использую высоту строки, равную высоте div, а затем выравнивание по вертикали: middle; чтобы он был в центре, тогда я не могу использовать этот трюк, потому что тогда подчеркивание заканчивается ниже div.
+1 Я не знал о том, чтобы оставить свойство color для наследования цвета шрифта - это сэкономит много пота и слез в будущем!
Я не совсем уверен, почему этот ответ имеет так много голосов. Это не полностью работает с многострочными текстами.
Обновление 2019: Рабочая группа CSS опубликовала черновик для оформления текста уровня 4, в котором будет добавлено новое свойство text-underline-offset (а также text-decoration-thickness ), позволяющее контролировать точное размещение подчеркивания. На момент написания статьи это черновой вариант на ранней стадии, который не был реализован ни одним браузером, но похоже, что в конечном итоге приведенная ниже техника устареет.
Оригинальный ответ ниже.
Проблема с использованием border-bottom непосредственно в том , что даже padding-bottom: 0 , подчеркивание имеет тенденцию быть слишком далеко от текста , чтобы хорошо выглядеть. Таким образом, у нас все еще нет полного контроля.
Одним из решений, обеспечивающих точность пикселей, является использование :after псевдоэлемента:
Изменяя bottom свойство (отрицательные числа в порядке), вы можете расположить подчеркивание именно там, где вы хотите.
Одной из проблем, связанных с этим методом, является то, что он ведет себя немного странно с переносом строк.
Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.
Свойства для оформления текста
1. Оформление линии: подчеркивание, обводка и зачеркивание
Подчеркивание, обводка и перечеркивающие линии отображаются только для незамещаемых блоков уровня строки ( display: inline ) и отображаются по всему тексту, включая пробелы между символами и словами, за исключением отступов в начале и конце строки.
Рис. 1. Прерывание линии подчеркивания
1.1. Вид линии оформления: свойство text-decoration-line
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-line определяет, какой тип линии, если таковые имеются, добавляется к элементу.
Свойство не наследуется.
| text-decoration-line | |
|---|---|
| Значения: | |
| none | Ни оформляет, ни запрещает оформление текста. Значение по умолчанию. |
| underline | Подчёркивает каждую строку текста. |
| overline | Каждая строка текста имеет линию над ней (то есть на противоположной стороне от подчеркивания). |
| line-through | Добавляет линию через середину каждой строки текста. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
1.2. Стиль линии оформления: свойство text-decoration-style
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-style определяет стиль линий, нарисованных для оформления текста, указанного в элементе. Значения имеют то же значение, что и для свойства border-style .
Свойство не наследуется.
| text-decoration-style | |
|---|---|
| Значения: | |
| solid | Добавляет отрезок простой линии. Значение по умолчанию. |
| double | Две параллельные сплошные линии с небольшим промежутком между ними. |
| dotted | Последовательность круглых точек. |
| dashed | Последовательность прямоугольных штрихов. |
| wavy | Указывает на волнистую линию. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
1.3. Цвет линии оформления: свойство text-decoration-color
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-color определяет цвет линии оформления текста, установленный для элемента с text-decoration-line .
Свойство не наследуется.
| Значения: | |
| цвет | Значение принимает все форматы цвета свойства color. Значение по умолчанию currentColor . |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
1.4. Краткая запись свойств линии оформления: свойство text-decoration
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration является краткой формой записи свойств text-decoration-line text-decoration-style text-decoration-color в одном объявлении. Пропущенные значения устанавливаются на их начальные значения. Значение по умолчанию text-decoration: none solid currentColor; . Свойство не наследуется. Тем не менее, стиль всех линий оформления текста должен быть одинаковый для одного элемента.
1.5. Расположение линии оформления: свойство text-underline-position
Поддержка браузерами
IE: —
Edge: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 71
Samsung Internet: —
Свойство text-underline-position устанавливает положение линии подчеркивания, указанного в элементе.
| Значения: | |
| auto | Браузер может использовать любой алгоритм для определения позиции подчеркивания, тем не менее линия должна быть размещена на или под базовой линией текста. Значение по умолчанию. |
| under | Подчеркивание расположено под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает нижний выносной элемент. Это значение можно комбинировать с left или right , если конкретная сторона предпочтительна в вертикальных типографских режимах. |
| left | В вертикальных типографских режимах подчеркивание выравнивается по левому краю текста. Тем не менее, это значение интерпретируется как under . |
| right | В вертикальных типографских режимах подчеркивание выравнивается по правому краю текста. Тем не менее, это значение интерпретируется как under . |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
Рис. 2. Подчеркивание текста с обеих сторон в вертикальных типографских режимах с помощью значений left и right
2. Тень текста: свойство text-shadow
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 4
Свойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными. Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию отдельного символа или слова. Также, с помощью тени можно сделать текст более читаемым, если контраст между цветом текста и фоном невелик.
Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration ). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.
Каждая тень определяется двумя или тремя значениями длины и необязательным цветом. Допустимы длины, равные 0 .
Свойство не наследуется.
Рис. 3. Синтаксис свойства text-shadow
| text-shadow | |
|---|---|
| Значения: | |
| x-offset | Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево. |
| y-offset | Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх. |
| blur | Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени. |
| цвет | Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства color . |
| none | Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
В отличие от box-shadow , текстовые тени не обрезаются и могут отображаться, если текст частично прозрачен. Как и box-shadow , текстовые тени не влияют на макет и не вызывают прокрутку или увеличение размера прокручиваемой области.
Свойства CSS для форматирования текста позволяют оформить содержимое страницы, не затрагивая HTML-код. Какие же параметры можно задать тексту через таблицы стилей?
Выравнивание по горизонтали
Для него используется свойство text-align. Выровнять с его помощью можно только блочный текст (теги
). Свойству может быть задано одно из четырех значений:
Вот код HTML-страницы, текст которой выровнен по правому краю:
Выглядеть страница будет так:
Если текст выровнен по ширине (text-align: justify), то можно использовать свойство text-align-last, чтобы задать отличное от основного содержимого выравнивание последней строчки текста элемента.
Выравнивание по вертикали
Может задаваться только для строчных элементов (картинок, форм), определяется свойством vertical-align. С его помощью выравнивается не содержимое, а сами элементы, кроме случая с ячейкой – использование vertical-align выравнивает не её саму, а только расположенный в ней текст. Значения могут быть следующими:
- baseline. задаётся свойству по умолчанию и выравнивает базовую линию элемента по базовой линии родителя. Если у родителя её нет, то выравнивание происходит по нижней границе.
- top и bottom. Если задано первое значение, то верхний край элемента будет совпадать с верхним краем самого высокого элемента строки. Можно сказать, что top — это выравнивание по верхнему краю. Второе свойство выполняет противоположную функцию — совмещает нижний край оформляемого элемента с нижней частью элемента, расположенного в строке ниже всех, то есть происходит выравнивание по нижнему краю.
- text-top и text-bottom. От предыдущих свойств отличаются тем, что выравнивание происходит по самым нижним и верхним текстовым элементам, а не любым.
- sub и super. Аналоги HTML-тегов и . Первое свойство делает элемент подстрочным, второе — надстрочным. Шрифт текста при этом не меняется.
- middle. Выравнивание по центру относительно элемента-родителя.
Также с помощью vertical-align можно переместить элемент вверх или вниз, указав значение в пикселях, единицах или процентах. Положительная цифра переместит его вверх, отрицательная — вниз.
Отступ первой строки
Свойство text-indent позволяет задать отступ первой строки текста. Например, так можно отформатировать абзацы, чтобы лучше визуально отделить их друг от друга. В качестве значения используется цифра, задающая длину в процентах, единицах или пикселях. Отрицательное число превратит отступ в выступ.
Межстрочный интервал
Задаётся свойством line-height, в качестве значения которого может указываться:
- Процент. Высчитывается от размера шрифта элемента.
- Число. Определяется как множитель от размера шрифта, который принимается за единицу. Например line-height: 1.5; установит полуторный интервал.
- Пиксели или пункты. Определяют не переменное, как предыдущие варианты, а постоянное расстояние.
Декорирование текста
Значение свойства text-decoration позволяет сделать текст зачёркнутым (line-through), подчёркнутым (underline) — линия появляется под текстом, надчёркнутым (overline) — линия появляется над текстом, или отменить эффекты (none).
Вот пример кода:
Результатом работы будет такая страница:
Интервал между символами и словами
Расстояние между словами можно изменить с помощью свойства word-spacing. Межсимвольное расстояние задаётся свойством letter-spacing. В качестве значений используются любые принятые в CSS единицы длины.
Смена регистра
Указав свойство text-transform, вы можете сделать так, чтобы все буквы текста были заглавными (значение uppercase), строчными (lovercase), или чтобы каждое слово начиналось с большой буквы (capitalize).
Обратите внимание, что текст в коде набран как обычно: единственная заглавная буква стоит в начале предложения. Отображение на странице меняет CSS-стиль.
Устанавливает величину отступа от каждого края элемента.
margin-bottom
Устанавливает величину отступа от нижнего края элемента.
margin-left
Устанавливает величину отступа от левого края элемента.
margin-right
Устанавливает величину отступа от правого края элемента.
margin-top
Устанавливает величину отступа от верхнего края элемента.
padding
Устанавливает значение полей вокруг содержимого элемента.
padding-block
Определяет начальный и конечный внутренние отступы элемента по блочной оси.
padding-block-end
Определяет конечный внутренний отступ элемента по блочной оси.
padding-block-start
Определяет начальный внутренний отступ элемента по блочной оси.
padding-bottom
Устанавливает значение поля от нижнего края содержимого элемента.
padding-inline
Определяет начальный и конечный внутренние отступы элемента по строчной оси.
Читайте также: