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

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

6 74
html underline

6 ответов:

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

без 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>
14

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

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

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

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

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

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

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

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

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