Css пунктирное подчеркивание: Как добавить пунктирное подчеркивание к ссылкам?

Содержание

Как добавить пунктирное подчеркивание к ссылкам?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Добавить к ссылкам вместо сплошного подчёркивания пунктирное.

Решение

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без её перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.

Для создания линии следует использовать свойство border-bottom со значением dashed, добавляя его к селектору A. Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot. Также необходимо убрать исходное подчёркивание у ссылок с помощью свойства text-decoration со значением none (пример 1).

Пример 1. Пунктирное подчеркивание

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пунктирное подчеркивание</title>
  <style>
   A.dot {
    text-decoration: none; /* Убираем подчеркивание */
    border-bottom: 1px dashed #000080; /* Добавляем свою линию */ 
   }
   A.dot:hover {
    color: #f00000; /* Цвет ссылки при наведении на нее курсора */
   }
  </style>
 </head>
 <body> 
  <p><a href="link.html">Обычная ссылка</a> на другую страницу.</p>
  <p><a href="#">Ссылка с пунктирным подчеркиванием</a>.</p>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Вид обычной ссылки и ссылки с пунктирным подчеркиванием

Толщина линии и цвет подчеркивания у ссылок также задаются через свойство border-bottom.

Как добавить пунктирное подчеркивание под текстом HTML

Как вы подчеркиваете текст html так, чтобы линия под текстом была пунктирной, а не стандартной? Предпочтительно, я хотел бы сделать это без использования отдельного файла CSS. Я новичок в html.

html

underline

Поделиться

Источник


parap    

06 марта 2013 в 16:19

9 ответов


141

Это невозможно без CSS. На самом деле тег <u> просто добавляет text-decoration:underline к тексту с помощью встроенного в браузер CSS.

Вот что вы можете сделать:

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>

Поделиться


Alfred Xing    

06 марта 2013 в 16:24


45

Используйте следующие коды CSS…

text-decoration:underline;
text-decoration-style: dotted;

Поделиться


Shakeel Ahmed    

13 июля 2016 в 07:53


15

Без CSS вы в основном застряли с использованием тега изображения. В основном сделайте изображение текста и добавьте подчеркивание. Это в основном означает, что ваша страница бесполезна для чтения с экрана.

С CSS все просто.

HTML:

<u>I like cheese</u>

CSS:

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

Пример выполнения

Пример страницы

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u>I like cheese</u>
</body>
</html>

Поделиться


epascarello    

06 марта 2013 в 16:25


11

HTML5 элемент может давать пунктирное подчеркивание, поэтому текст под ним будет иметь пунктирную линию, а не обычное подчеркивание. А атрибут title создает подсказку для пользователя при наведении курсора на элемент:

NOTE: Пунктирная граница/подчеркивание по умолчанию отображается в Firefox и Opera, но IE8, Safari и Chrome нуждаются в строке CSS:

<abbr title="Hyper Text Markup Language">HTML</abbr>

Поделиться


Fatima Waheed    

11 июля 2016 в 14:14


4

Если содержимое содержит более 1 строки, добавление нижней границы не поможет. В этом случае вам придется использовать,

text-decoration: underline;
text-decoration-style: dotted;

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

text-underline-position: under;

Поделиться


Darshana Gunawardana    

09 октября 2018 в 10:12


3

Переформатировал ответ на @epascarello :

u. dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}
<!DOCTYPE html>
<u>I like cheese</u>

Поделиться


anatoly techtonik    

26 декабря 2015 в 06:54


0

Вы можете попробовать этот метод:

<h3>Hello World!</h3>

Обратите внимание, что без text-underline-position: under; у вас все равно будет пунктирное подчеркивание, но это свойство даст ему больше передышки.

Это предполагает, что вы хотите встроить все в файл HTML с помощью встроенного стиля, а не использовать отдельный файл CSS или тег.

Поделиться


Mona Jalal    

05 февраля 2020 в 00:12


0

Вы можете использовать border bottom с опцией dotted .

border-bottom: 1px dotted #807f80;

Поделиться


Neel    

24 января 2020 в 07:16


-2

Это не невозможно без CSS. Например, в качестве элемента списка:

<li><!--content --></li>

Поделиться


Davington III    

30 апреля 2015 в 09:03

Похожие вопросы:

Как сделать строку под текстом без текстового оформления: подчеркивание?

Мне нужно добавить строку под текстом, без текстового оформления: подчеркивание; иначе как сделать пользовательское пространство между текстом и строкой. Что мы делаем

Пунктирное подчеркивание в TextView с использованием SpannableString в Android

Я хочу пунктирное подчеркивание ниже SpannableString Например вот моя струна Hello, How are you? Я хочу разработать пунктирное подчеркивание ниже How слова, так как же его установить? Если я добавлю…

IE7 Nivo Slideshow странное пунктирное подчеркивание на подписи

У меня есть слайд-шоу Nivo, работающее на сайте. Когда я тестирую в страшном IE7, он показывает пунктирное подчеркивание на подписях. Я устал искать преступника в своей стихии, но пока мне не везет….

Как создать двойное пунктирное подчеркивание для текста в css

Как мы можем создать двойное пунктирное подчеркивание в CSS ? Я использую свойство border-bottom. border-bottom: 1px dotted #oof Но появляется только одно пунктирное подчеркивание. Как мы можем…

CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…

Android пунктирное подчеркивание остается в середине textview

Я хочу показать пунктирное подчеркивание под textview, ниже приведены мои коды <TextView android:id=@+id/contact_num android:layout_width=wrap_content android:layout_height=wrap_content…

Получение: после добавить подчеркивание только под текстом, а не весь контейнер

Я хочу, чтобы заголовки подчеркивались методом :after . Я заставляю его работать частично. Чего я не могу понять, так это как сделать так, чтобы подчеркивание ( after ) находилось только под текстом…

Пунктирное подчеркивание TextView не переносится на следующую строку с помощью SpannableString в Android

Я сделал пунктирное подчеркивание textview, используя это пунктирное подчеркивание в TextView, используя SpannableString в Android . Но пунктирное подчеркивание textview не переносится на следующую…

Как удалить синее пунктирное подчеркивание предложения в TextView из Apple keyboard dictation?

Если пользователи используют Apple dictation с мягкой клавиатуры, то после завершения их voice input. Он показывает синее пунктирное подчеркивание предложения для коррекции голоса. Но я не могу от…

CSS как установить автоматическую длину подчеркивания doth под текстом

в CSS я хочу иметь подчеркивание как пунктирное под моим текстом, но текст может быть коротким или длинным по вводу пользователя, а пунктирное подчеркивание должно быть нарисовано до конца строки…

Устанавливаем пунктирное подчеркивание ссылок. | Vaden Pro

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

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

Ссылка считается тоже активным элементом, поэтому их всегда подчеркивают. Стандартное подчеркивание осуществляется через свойство text-decoration. Из названия можно определить, что свойство отвечает за декорации текста, то есть его оформление. Если при этом свойстве будет стоять значение underline, то текст будет подчеркнут сплошной линией.

В последнее время отходят от такого формата подчеркивания, и все чаще на сайтах можно встретить подчеркивание ссылок пунктирной линией. Для осуществления такого подчеркивания свойство text-decoration уже не послужит. Для этого нужно обратиться к свойству border-bottom. Через него мы установим нижнюю границу для ссылки, которая и послужит нашим подчеркиванием. Чтобы сделать линию пунктирной, требуется указать стиль линии в этом свойстве. Пунктиру соответствует команда dashed. Но перед этим нужно не забыть убрать исходное подчеркивание, которое определяется браузером по умолчанию для ссылок. Для этого обращаемся все к тому же свойству text-decoration и прописываем для него значение none. Чтобы наша фишка применилась только к определенной группе ссылок – необходимо указать селектор класса. Код смотрим внизу

HTML

<p><a  href="#">Ссылка 1</a></p>

CSS

.underline {
    text-decoration: none; 
    border-bottom: 1px dashed #444; 
	color:#444;
   }

Что видим в браузере?

Для справки

Пунктирное подчеркивание соответствует не именно ссылкам, а текстовым командам, при клике по которым выполняются некоторые действия на текущей страничке. Но с появлением системы AJAX, которая позволяет обновлять документ без перезагрузки, такое подчеркивание начали применять к составляющим ее элементам. Это решение было принято для того, чтобы визуально отличать такие элементы на странице от обычных ссылок.

В каких браузерах работает?

4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Оценок: 3 (средняя 5 из 5)

  • 1847 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Подчёркнутый текст (свойство text-decoration) | CSS примеры

Отменить подчёркивание у ссылки


Стиль ссылки CSS 

<style>
.raz {
  text-decoration: none;
  border: none; 
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>

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

Ссылка подчёркивается при наведении


Стиль ссылки CSS 

<style>
.raz:not(:hover) {
  text-decoration: none;
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>



Пунктирное подчёркивание


Стиль текста CSS 

<style>
.raz {
  text-decoration: underline; 
  text-decoration-style: dashed; 
  cursor: pointer; 
}
</style>

<span>Стиль текста CSS</span>








Сделать линию над и под текстом


Стиль текста CSS 

<style>
.raz {
  text-decoration-line: underline overline;
}
</style>

<span>Стиль текста CSS</span>






text-decoration-color

currentcolor
цвет черты что у текста
transparent
черта полностью прозрачная (невидимая)
red
цвет черты ключевым словом
#ff0000 или #ff0000ff
цвет черты в формате HEX
rgb(255,0,0) или rgba(255,0,0,1)
цвет черты в формате RGB или RGBA
hsl(0,100%,50%) или hsla(0,100%,50%,1)
цвет черты в формате HSL() или HSLA()
initial
currentcolor
inherit
наследует значение родителя
unset
currentcolor

Свойство text-decoration-color не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-color: currentcolor;
}
</style>

<div>Свойство <code>text-decoration-color</code> не наследуется, применяется ко всем элементам</div>


ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства text-underline-offset и text-decoration-width не реализованы вовсе и потому пока не рассмотрены в статье.





Пропуск выносных частей символов в подчеркиваемом тексте в Google Chrome


Пример подчёркнутого текста 

<style>
.raz {
  text-decoration: underline;
  text-decoration-skip: ink;
}
</style>

<span>Пример подчёркнутого текста</span>

Подчёркивание без пропусков выносных частей символов в Safari


Пример подчёркнутого текста 

<style>
.raz {
  text-decoration: underline;
  -webkit-text-decoration-skip: none;
}
</style>

<span>Пример подчёркнутого текста</span>







Разница

text-decoration и border

Нижнее подчёркивание, сделанное text-decoration: underline; Нижнее подчёркивание, сделанное border-bottom: 1px solid; 
<table>
  <tr>
    <tdvydelit">text-decoration: underline;">Нижнее подчёркивание, сделанное <code>text-decoration: underline;</code>
    <td><spanvydelit">border-bottom: 1px solid;">Нижнее подчёркивание, сделанное <code>border-bottom: 1px solid;</code></span>
</table>

Свойство text-decoration подходит лучше для подчёркивания многострочного текста (при уменьшении экрана длинное слово также переходит на следующую строку при отзывчивой вёрстке). Свойство border активно использовали, когда не поддерживались свойства text-decoration-line, text-decoration-style и text-decoration-color.

﹎ — Точко-пунктирное подчёркивание: U+FE4E

Значение символа

Точко-пунктирное подчёркивание. Совместимые формы ККЯ.

Символ «Точко-пунктирное подчёркивание» был утвержден как часть Юникода версии 1.1 в 1993 г.

Свойства

Версия1.1
БлокСовместимые формы ККЯ
Тип парной зеркальной скобки (bidi)Нет
Композиционное исключениеНет
Изменение регистраFE4E
Простое изменение регистраFE4E

Кодировка

Кодировкаhexdec (bytes)decbinary
UTF-8EF B9 8E239 185 1421571060611101111 10111001 10001110
UTF-16BEFE 4E254 786510211111110 01001110
UTF-16LE4E FE78 2542022201001110 11111110
UTF-32BE00 00 FE 4E0 0 254 786510200000000 00000000 11111110 01001110
UTF-32LE4E FE 00 0078 254 0 0132526899201001110 11111110 00000000 00000000

Пунктирное подчеркивание ссылки · GitHub

Пунктирное подчеркивание ссылки · GitHub

Instantly share code, notes, and snippets.

Пунктирное подчеркивание ссылки

/**
* Пунктирное подчеркивание ссылки
*/
a {
color: #00e;
text-decoration: none;
background: linear-gradient(left, #00e, #00e 50%, transparent 50%) 0 100% repeat-x;
background-size: 2px 1px;
}
a:hover {
color: red;
background: linear-gradient(left, red, red 50%, transparent 50%) 0 100% repeat-x;
}
<p>
<a href=»/»>ссылка</a>
</p>
{«view»:»split-vertical»,»fontsize»:»100″,»seethrough»:»»,»prefixfree»:»1″,»page»:»all»}

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.

Нестандартное подчеркивание ссылок. Да и не только ссылок

Подготовил: Евгений Рыжков

Дата публикации: 19.12.2009

Задача

Сделать особое оформление подчеркивания ссылок не прибегая к использованию дополнительных тегов. Примеры таких задач:

  • цвет подчеркивания ссылки отличается от цвета самой ссылки
  • сделать подчеркивание не сплошной линией (например, пунктирной)

Когда на странице много ссылок близко расположенных друг к другу, все их подчеркивания мешают восприимчивости текста, а иногда откровенно раздражают:

налепленные ссылки на europages.com

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

приглушенное подчеркивание на livejournal.ru

пунктирное подчеркивание на b2b-club.ru

Решение

Для примера сделаем цвет подчеркивания отличным от цвета текста ссылки, плюс сразу сделаем его пунктиром. Т.к. напрямую нельзя влиять на цвет и вид подчеркивания ссылки, воспользуемся свойством border-bottom:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
}

Очень простое решение. Таким же образом можно сделать любого вида подчеркивание используя свойство background-image при заданном background-position: left bottom.

Но данное решение не всегда подходит. Например, нужно оформить следующую ссылку:

При чем картинка должна быть тоже кликабильной. Попробуем простой путь:

a {
color: #FF6600;
text-decoration: none;
border-bottom: 1px dashed #3399FF;
background: url(path-to/wheel.png) no-repeat;
padding-left: 47px;
}

Жаль, но такой вариант в данном случае не подойдет — подчеркивание у нас бордюром, а бордюр тянется по всей ширине элемента:

IE7 оказался более тендитным к применению свойств чисто блочных (padding-top и padding-bottom) к строчному элементу:

В общем, придется немного усложнить html код ровно на один элемент. Для этого возьмем нейтральный — span:

<a href="#"><span>Авто</span></a>


.wheel {
color: #FF6600;
text-decoration: none;
background: url(path-to/wheel.png) no-repeat;
padding: 8px 0 8px 47px;
font-size: 16px;
font-weight: bold;
color: #084463;
zoom: 1; /* spacial for ie 7 */
}
.wheel span {
border-bottom: 1px solid #b7d2e0;
}

Демо пример. Проверено в:

Заметки

  • В данном примере для IE сработал zoom (который в идеале лучше вынести в отдельный css, подключенный условными комментариями). Но он не всегда помогает. Если с zoom возникли какие-то проблемы (например, починило подчеркивание, но сломало верстку) заменяем zoom на position: relative.
  • Такой прием можно применять не только к ссылкам.

Оформление внешних ссылок

Вставка стрелок

text-decoration-style — CSS: Каскадные таблицы стилей

Свойство CSS text-decoration-style устанавливает стиль строк, заданных параметром text-decoration-line . Стиль применяется ко всем строкам, для которых задано значение text-decoration-line .

Если указанное украшение имеет определенное семантическое значение, например сквозная линия, означающая, что некоторый текст был удален, авторам рекомендуется обозначать это значение с помощью тега HTML, например или .Поскольку в некоторых случаях браузеры могут отключать стили, семантическое значение в такой ситуации не исчезнет.

При одновременной установке нескольких свойств line-decoration может быть удобнее использовать сокращенное свойство text-decoration .

 
стиль оформления текста: твердый;
стиль оформления текста: двойной;
стиль оформления текста: пунктирная;
стиль оформления текста: пунктирная;
стиль оформления текста: волнистый;


стиль оформления текста: наследование;
стиль оформления текста: начальный;
стиль оформления текста: вернуться;
стиль оформления текста: не задано;

Значения

твердый

Рисует одну линию.

двойной

Рисует двойную линию.

с точками

Рисует пунктирную линию.

штриховая

Рисует пунктирную линию.

волнистый

Рисует волнистую линию.

-моз-нет

Не рисует линии. Используйте вместо него text-decoration-line : none .

 твердый | двойной | пунктирная | пунктирная | волнистый

Установка волнистого подчеркивания 

 .пример {
       -moz-текст-украшение-строка: подчеркивание;
       -moz-text-decoration-style: волнистый;
       -moz-текст-украшение-цвет: красный;
    -webkit-text-decoration-line: подчеркивание;
    -webkit-text-decoration-style: волнистый;
    -webkit-текст-украшение-цвет: красный;
}
CSS 
  .wavy {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
}
HTML 
  
 Под этим текстом есть волнистая красная линия.
Результаты

Таблицы BCD загружаются только в браузере

  • При одновременной установке нескольких свойств line-decoration может быть удобнее использовать сокращенное свойство text-decoration вместо этого.

Как добавить пунктирное подчеркивание под HTML-текстом

Как добавить пунктирное подчеркивание под HTML-текстом — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено
141k раз

Как вы подчеркиваете html-текст, чтобы линия под текстом была пунктирной, а не стандартным подчеркиванием? Желательно, чтобы это было сделано без использования отдельного файла CSS.Я новичок в html.

Создан 06 мар.

параппарап

1,955 44 золотых знака1515 серебряных знаков2727 бронзовых знаков

4

Без CSS это невозможно.Фактически, тег просто добавляет text-decoration: подчеркивание к тексту с помощью встроенного в браузер CSS.

Вот что вы можете сделать:

Создан 06 мар.

Альфред Син

3,99422 золотых знака2020 серебряных знаков3434 бронзовых знака

4

Используйте следующие коды CSS…

  текст-оформление: подчеркивание;
стиль оформления текста: пунктирная;

Создан 13 июл.

Шакил АхмедШакил Ахмед

1,1271414 серебряных знаков2121 бронзовый знак

3

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

С CSS это просто.

HTML: 

   Я люблю сыр

CSS: 

  u.dotted {
  нижняя граница: 1px пунктирная # 999;
  текстовое оформление: нет;
}

Запуск примера

Пример страницы 

  


    <стиль>
        u.пунктирный{
          нижняя граница: 1px пунктирная # 999;
          текстовое оформление: нет;
        }
    


     Я люблю сыр

анимусон ♦

51.2k2828 золотых знаков133133 серебряных знака142142 бронзовых знака

ответ дан 6 мар ’13 в 16:25

epascarelloepascarello

187k1919 золотых знаков175175 серебряных знаков213213 бронзовых знаков

Элемент HTML5 может давать пунктирное подчеркивание, поэтому нижний текст будет иметь пунктирную линию, а не обычное подчеркивание.Атрибут title создает всплывающую подсказку для пользователя, когда он наводит курсор на элемент:

ПРИМЕЧАНИЕ. Пунктирная граница / подчеркивание по умолчанию отображается в Firefox и Opera, но IE8, Safari и Chrome нуждаются в строке CSS:

   HTML

Создан 11 июл.

2

Ответ переформатирован на @epascarello :

  шт.пунктирный {
  нижняя граница: 1px пунктирная # 999;
  текстовое оформление: нет;
}  
  
 Я люблю сыр

Создан 26 дек.

анатолий техтоник

17.7k88 золотых знаков114114 серебряных знака134134 бронзовых знака

Если в содержимом более 1 строки, добавление нижней границы не поможет.В этом случае вам придется использовать

  текст-оформление: подчеркивание;
стиль оформления текста: пунктирная;

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

  текст-подчеркивание-позиция: под;

Создан 09 окт.

Вы можете попробовать этот метод:

  
 Привет, мир!

Обратите внимание, что без text-underline-position: under; , у вас по-прежнему будет пунктирная линия подчеркивания, но это свойство даст ему больше места для передышки.

Предполагается, что вы хотите встроить все в файл HTML, используя встроенный стиль, а не использовать отдельный файл или тег CSS.

Создан 05 фев.

Мона ДжалалМона Джалал

25.4k5151 золотой знак

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

Встроенный HTML 

   пунктирным подчеркиванием

Для пунктирного подчеркивания используйте text-decoration: подчеркивание пунктирным .

   подчеркнуты пунктирной линией

Как сказал Даршана Гунавардана, вы можете использовать text-underline-position: под , чтобы было больше места между текстом и строкой:

   пунктирным подчеркиванием

В отдельном файле CSS 

  u {
  оформление текста: подчеркнутый пунктир;
}

ответ дан 7 июл в 17:20

БарриКепка

1111 серебряный знак1111 бронзовых знаков

Вы можете использовать нижнюю границу с опцией , пунктирной .

  нижняя граница: 1px с точками # 807f80;

Создан 24 янв.

NeelNeel

8,1642121 золотой знак7676 серебряных знаков120120 бронзовых знаков

Это невозможно без CSS.Например, как элемент списка:

  
  •   
    •

    Миричан

    1,92211 золотых знаков1212 серебряных знаков2525 бронзовых знаков

    Создан 30 апр.

    5

    Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html подчеркивание или задайте свой вопрос.

    lang-html

    Stack Overflow лучше всего работает с включенным JavaScript

    Ваша конфиденциальность

    Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

    Принимать все файлы cookie

    Настроить параметры

    Как добавить пунктирное подчеркивание под текстом HTML

    Как добавить пунктирное подчеркивание под текстом HTML

    Как вы подчеркиваете html-текст, чтобы линия под текстом была пунктирной, а не стандартным подчеркиванием? Желательно, чтобы это было сделано без использования отдельного файла CSS.Я новичок в html.

    Ответ № 1:

    Без CSS это невозможно. Фактически, тег просто добавляет text-decoration: подчеркивание к тексту с помощью встроенного в браузер CSS.

    Вот что вы можете сделать:

    Ответ № 2:

    Используйте следующие коды CSS…

      текст-оформление: подчеркивание;
стиль оформления текста: пунктирная;

    Ответ № 3:

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

    С CSS это просто.

    HTML: 

       Я люблю сыр

    CSS: 

      шт.пунктирный{
  нижняя граница: 1px пунктирная # 999;
  текстовое оформление: нет;
}

    Запуск примера

    Пример страницы 

      


    <стиль>
        u.dotted {
          нижняя граница: 1px пунктирная # 999;
          текстовое оформление: нет;
        }
    


     Я люблю сыр

    Ответ № 4:

    В элементе HTML5 может быть пунктирное подчеркивание, поэтому нижний текст будет иметь пунктирную линию, а не обычное подчеркивание.Атрибут title создает всплывающую подсказку для пользователя, когда он наводит курсор на элемент:

    ПРИМЕЧАНИЕ. Пунктирная граница / подчеркивание по умолчанию отображается в Firefox и Opera, но IE8, Safari и Chrome нуждаются в строке CSS:

       HTML

    Ответ № 5:

    Если в содержимом более 1 строки, добавление нижней границы не поможет. В этом случае вам придется использовать

      текст-оформление: подчеркивание;
стиль оформления текста: пунктирная;

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

      текст-подчеркивание-позиция: под;

    Ответ № 6:

    Ответ переформатирован на @epascarello :

      шт.пунктирный {
  нижняя граница: 1px пунктирная # 999;
  текстовое оформление: нет;
}  
      
 Я люблю сыр

    Ответ № 7:

    Вы можете использовать нижнюю границу с опцией , пунктирной .

      нижняя граница: 1px с точками # 807f80;

    Ответ 8:

    Вы можете попробовать этот метод:

      
     Привет, мир!

    Обратите внимание, что без text-underline-position: under; , у вас по-прежнему будет пунктирная линия подчеркивания, но это свойство даст ему больше места для передышки.

    Предполагается, что вы хотите встроить все в файл HTML, используя встроенный стиль, а не использовать отдельный файл или тег CSS.

    Ответ № 9:

    Это невозможно без CSS. Например, как элемент списка:

      
  •  
    •

    Подчеркивание с помощью CSS — tempertemper

    Если вы не подчеркиваете ссылки, то должны. Есть несколько способов подчеркнуть ссылки; text-decoration: подчеркивание является наиболее очевидным, поскольку именно так оформляются ссылки по умолчанию, а border-bottom предлагает нам немного больше гибкости.Используя границы, можно указать толщину, стиль и цвет, но знаете ли вы, что теперь это можно сделать с помощью text-decoration: underline ?

    Зачем вообще беспокоиться, если это уже работает для нас с границами? Что ж, text-decoration: подчеркивание лучше типографически , так как подчеркивания хорошо сидят на базовой линии слов, проходя через нисходящие элементы (части букв, которые идут ниже базовой линии в таких буквах, как g , p и y ), тогда как border-bottom подчеркивает ниже нижних нижних, что означает слишком большое расстояние между словами и их подчеркиванием, когда.

    Не только это, но браузеры теперь обнаруживают нисходящие элементы, а text-decoration underline аккуратно пропускает их по умолчанию. Это можно отменить с помощью text-decoration-skip-ink (или text-decoration-skip в Safari), но я не вижу, что это даст, поэтому по умолчанию он включен.

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

    Подчеркнутый, надстрочный

    Здесь мы говорим о подчеркивании, но стоит сделать это заранее с небольшим касательным: text-decoration-line , как и text-decoration , имеет 3 позиции:

    • Под текстом ( подчеркнутый )
    • По тексту ( сквозная )
    • Над текстом ( над текстом )

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

      текст-оформление: подчеркивание; 
     text-decoration-line: подчеркивание поверх;

    Как выглядит подчеркивание

    Вернуться к подчеркиванию. Теперь у нас есть контроль над тем, как они выглядят, с помощью text-decoration-style ; есть 5 вариантов:

    • штриховая
    • двойной
    • пунктирная
    • цельный
    • волнистый

    Каждый из них выглядит так, как вы ожидаете, с двойной линией, волнистой линией и т. Д.Просто добавьте объявление text-decoration-style :

      текст-оформление: подчеркивание; 
     стиль оформления текста: волнистый;

    Цвет подчеркивания

    Отличный. text-decoration-color позволяет изменить цвет подчеркивания. Он принимает любое обычное значение цвета CSS, будь то ключевое слово, шестнадцатеричное, RGB, RGBA, HSL и т. Д .:

      текст-оформление: подчеркивание; 
     цвет-оформления-текста: красный;

    Просто убедитесь, что подчеркивание соответствует желаемой цветовой контрастности!

    Утолщение подчеркиваний

    Наконец, мы можем контролировать толщину подчеркивания с помощью text-decoration-Thickness , например:

      текст-оформление: подчеркивание; 
     толщина украшения текста: 5 пикселей;

    Комбинации

    Конечно, мы можем делать лоты одновременно:

      текст-оформление: подчеркивание; 
     стиль оформления текста: волнистый; 
     цвет-оформления-текста: красный; 
     толщина украшения текста: 5 пикселей;

    Или мы можем использовать text-decoration-line вместо text-decoration :

      текст-украшение-строка: подчеркивание; 
     стиль оформления текста: волнистый; 
     цвет-оформления-текста: красный; 
     толщина украшения текста: 5 пикселей;

    стенография

    Превращается в CSS! К счастью, как и поля, отступы, радиус границы и множество других свойств CSS, text-decoration теперь является сокращением, в котором мы можем объявить несколько значений:

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

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

    Прогрессивное улучшение

    Стиль подчеркивания хорошо поддерживается всеми современными браузерами. Более старые версии (и Internet Explorer 11 и ниже, разумеется) должны получить стандартный, но все же очень удобный для пользователя подчеркивание, если в вашем сбросе CSS нет ничего подобного:

      a {
     текстовое оформление: нет; 
    }

    Но имейте в виду, поддержка браузером зависит от:

    • имущество, которое вы используете
    • ценностей в собственности

    Префиксы, необходимые для сокращения

    Если вы используете стенографию, вам понадобятся префиксы поставщиков для Safari, чтобы делать ставки:

      текст-оформление: подчеркивание волнистым красным; 
     -webkit-text-decoration: подчеркивание волнистым красным цветом;

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

    text-decoration-Thickness не так хорошо поддерживается, как другие

    Браузер поддерживает text-decoration-line , text-decoration-style и text-decoration-color довольно хорошо. Каждый браузер реализовал все три одновременно, но управление толщиной подчеркивания было введено намного позже.Фактически, в настоящее время его поддерживают только Safari и Firefox, поэтому мы все еще ждем Chrome (и, следовательно, Opera и Edge).

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

      оформление текста: подчеркнутый сплошным красным цветом; 
     text-decoration: подчеркивание сплошным красным 5px;

    текст-украшение-толщина и проценты не играют хорошо

    Также будьте осторожны при использовании процентных значений толщины, поскольку их поддерживает только Firefox.

    Хорошая новость заключается в том, что процентные значения рассчитываются как процент от 1em, поэтому text-decoration-Thickness: 0,1em совпадает с text-decoration-Thickness: 10% , поэтому вы также можете придерживаться em s, поскольку они фактически делают то же самое.

    Пиксели присутствуют всегда ( пикселей, ), но с точки зрения типографики лучше сохранить толщину линии относительно текста, который она подчеркивает, поэтому, если пользователь увеличивает размер текста на экране, подчеркивание увеличивается пропорционально.

    толщина текстового орнамента беспорядок

    Будьте осторожны при объединении text-decoration-style с text-decoration-Thickness . Все, кроме стандартной сплошной линии (и, возможно, двойной линии ), может выглядеть беспорядочно, если толщина установлена ​​слишком большой. Эти волнистые , пунктирные и пунктирные почти всегда обрезаются в неопрятных местах, когда пропускают нижние элементы, и в конце слова.

    Рекомендации по удобству использования

    Как и в случае с большинством CSS, помните: с большой мощностью приходит большая ответственность, и с точки зрения удобства использования я бы опасался использовать что-либо, кроме сплошного подчеркивания для стилизации ссылки.

    Значит, у вас все в порядке, если вам нужно:

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

    Но будьте осторожны со всем остальным:

    • text-decoration-line: line-through — это в основном то, как выглядят элементы с зачеркиванием
    • text-decoration-line: overline выглядит странно, и вместо этого текст над ссылкой может выглядеть как ссылка
    • волнистый , пунктирный или пунктирный подчеркивания может выглядеть как орфографические или грамматические ошибки в текстовом документе, а не как ссылки

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

    Что бы я сделал

    Shorthand поставляется с префиксами поставщиков и изворотливыми двойными объявлениями, поэтому я бы начал с классического text-decoration: underline; и улучшите его. Я был бы склонен избегать чего-либо, кроме прямого подчеркивания, которое хорошо известно пользователям, поэтому text-decoration-line отсутствует; что оставляет мне всплеск цвета и приятную толщину на основе для браузеров, отличных от Chromium:

      a {
     оформление текста: подчеркивание; 
     цвет-оформления-текста: красный; 
     толщина украшения текста: 0.1em; 
    }

    CSS | Свойство в стиле текст-оформление — GeeksforGeeks

    < html >

    < head 000 >

    Свойство CSS с декором в стиле текста

    title >

    4 >

    p {

    стиль оформления текста: наследование;

    }

    .основной {

    стиль оформления текста: волнистый;

    }

    .GFG1 {

    текст-украшение-строка: подчеркивание;

    }

    .GFG2 {

    текст-украшение-строка: сквозная;

    }

    .GFG3 {

    text-decoration-line: overline;

    }

    стиль >

    головка >

    5000

    >

    < h2 стиль = «цвет: зеленый» >

    GeeksforGeeks

    000

    < b > стиль оформления текста: наследование b >

    <9000 класс = «основной» > 900 11

    < p class = "GFG1" >

    Эта линия имеет унаследованный стиль подчеркивания.

    p >

    < p class = «GFG2» 000

    строка унаследована 9000 9000 11

    1 сквозной стиль.

    p >

    < p class = "GFG3"

    line унаследовал эту линию 9000 9000 119

    1 стиль.

    p >

    div >

    000 000 0004 0004 html >

    попутный ветер-подчеркивание-утилит - npm

    Простой плагин Tailwind, написанный для создания утилит подчеркивания.

    Установка

    Для установки запустите npm i tailwind-underline-utils в каталоге внешнего интерфейса вашего сайта.Тогда потребует плагина в вашем файле конфигурации Tailwind, например:

      плагины: [
  требуется ('попутный ветер-подчеркивание-утилит')
]

    Конфигурация

    Подчеркнутый стиль

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

      .underline-style-solid {
  стиль оформления текста: «сплошной»;
}
.underline-style-dotted {
  стиль оформления текста: 'пунктирный';
}
.underline-style-dotted {
  стиль оформления текста: 'двойной';
}
.underline-style-dotted {
  стиль оформления текста: пунктирная;
}
.underline-style-dotted {
  стиль оформления текста: «волнистый»;
}

    Цвет подчеркивания

    Плагин будет генерировать настраиваемые значения text-decoration-color на основе конфигурации темы. Например, следующая цветовая конфигурация:

      цветов: {
  красный: 'красный',
  зеленый: "зеленый",
}

    сгенерирует следующие классы:

      .underline-red {
  цвет оформления текста: красный;
}
.underline-green {
  цвет оформления текста: зеленый;
}

    Толщина подчеркивания

    Плагин также предоставляет объект конфигурации underlineThickness , который можно добавить в конфигурацию темы . Например, следующая конфигурация:

      тема: {
  underlineThickness: {
    'тонкий': '2px',
    'толстый': '5px'
  }
}

    сгенерирует следующий CSS:

     . Underline-Толщина-тонкий {
  толщина украшения текста: 2 пикселя;
}
.подчеркивание-толщина-толстый {
  толщина текстового украшения: 5 пикселей;
}

    Смещение подчеркивания

    Наконец, плагин предоставляет объект конфигурации темы underlineOffset . Например, следующая конфигурация темы:

      тема: {
  underlineOffset: {
    'small': '2px',
    'medium': '5px',
  }
}

    сгенерирует следующий CSS:

      .underline-offset-small {
  текст-подчеркивание-смещение: 2 пикселя;
}
.underline-offset-medium {
  текст-подчеркивание-смещение: 5 пикселей;
}

    Семейство оформления текста CSS (не только для подчеркивания ссылок)

    Рисунок. Последние функции CSS Text Decoration Level 4, которые не будут работать везде.

    text-decoration-skip-ink - для предотвращения пересечения линии

    Функция, которая указывает, будет ли декоративная линия пунктирована, чтобы не было пересечений с кривыми текста.

      текст-украшение-пропустить-чернила: авто | нет

    В стилях по умолчанию современных веб-браузеров есть параметр text-decoration-skip-ink: auto , поэтому обычно нам не приходится с этим иметь дело. На всякий случай, если мы захотим его выключить. Но я понятия не имею, зачем нам это делать в обычных ситуациях.

    Первоначально он использовался в спецификации как text-decoration-skip , но теперь эта функция была удалена - она ​​будет разделена на несколько дополнительных функций.

    Эта функция полностью поддерживается современными веб-браузерами.

    text-underline-position - позиция декоративной линии

    Где появляется декоративная линия:

      текст-подчеркивание-позиция: авто |
  [под || [слева | справа]]

    Значения слева и справа предназначены для азиатских языков, которые отмечены вертикально (китайский, японский, корейский,…)

    Для нас интересно значение под , оно будет выдавать подчеркивание под контуром буквы (часть буквы, которая идет вниз под обычной линией, такой как p, y или j).

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

    Эта функция не поддерживается Safari.

    text-underline-offset - офсет оформления

    Определяет смещение линии декорирования от исходного положения:

      смещение подчеркивания текста: авто | <ширина>

    Он действует по-разному в зависимости от позиции text-underline-position .Когда дело доходит до , подчеркивание , движение идет вниз, а с чертой - движение вверх.

    Значение width рекомендуется использовать в единицах em, чтобы оно соответствовало размеру текста.

    Эта функция поддерживается Safari и Firefox, но не Chrome.

    text-decoration-width и text-decoration-width - ширина линии оформления

    Для установки ширины декоративной линии у нас есть два свойства:

      text-decoration-width: авто | <ширина>;
толщина украшения текста: авто | <ширина>;

    В то время как:

    • text-decoration-width является стандартным в соответствии с уровнем 4 модуля оформления текста CSS, но на самом деле ни один браузер не может этого сделать.
    • толщина текста-декорации не является стандартом. Однако он поддерживается Safari и Firefox, но не Chrome.
      Если вы хотите попробовать это, снова рекомендуется в em , чтобы адаптироваться к размеру текста.

    текст-акцент - позиция акцента (не интересна для западных стран)

    Этот ярлык функций полезен только для восточно-азиатских и других экзотических языков, поэтому я не буду больше объяснять его.Он рисует точку с ударением над, под или рядом с текстом.

    Эти функции принадлежат здесь: стиля выделения текста , цвета выделения текста , положения выделения текста и выделения текста .

    Поскольку у нас есть больше функций CSS, украшающих текст, полезно знать порядок их отображения. Мы рассмотрим их по порядку, начиная с тех, которые визуализируются снизу, оттенками, вверх.

    • оттенков (свойство text-shadow )
    • подчеркивание (признак текст-украшение-строка )
    • надстрочных линий (признак , текст-украшение-строка )
    • сам текст
    • знаков выделения (функция выделение текста )
    • сквозная (функция текст-украшение-строка )

    Согласно этому списку, браузер разрешит конфликты в изображении кривых текста и его украшений.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *