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

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

Ответ 1

Это невозможно без 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>

Ответ 2

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

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

HTML:

<u class="dotted">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 class="dotted">I like cheese</u>
</body>
</html>

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

Ответ 6

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

<li style="border-bottom: 1px dashed"><!--content --></li>