Красное, зелёное и синее подчёркивание — проверка орфографии

В Word есть функция проверки орфографии. Она отмечает волнистыми линиями ошибки орфографии, пунктуации, стилистики. С ней легче заметить случайную опечатку, проверить текст, найти какие-то недоработки. Ниже указано, что означает каждая полоса.

Красная. Неправильно написано слово, или его нет в базе данных Office. Красным цветом также обозначаются повторы.
Зелёная. Ошибки с грамматикой, стилистикой, пунктуацией. Лишние скобки. Несогласованный текст.
Синяя. Несоответствие формата.

Обычно эта функция приносит пользу. Но если вы правильно всё написали, то внезапно появившиеся волнистые линии будут раздражать и мешать. Как убрать подчёркивание в Word, если оно поставлено автоматически при проверке орфографии:

Кликните правой кнопкой мыши на фрагмент, под которым появилась волнистая линия.
Чтобы избавиться от неё, выберите пункт «Пропустить».
Чтобы Word запомнил выбранное слово и записал его в свой словарь, нажмите «Добавить».

Если вы хотите совсем отключить проверку, откройте настройки:

Перейдите в меню Сервис — Правописание (в Word 2007 для этого надо нажать на логотип Office в левом верхнем углу и в выпавшем списке выбрать «Параметры»).
Уберите галочку в «Автоматически проверять орфографию» или о. Автопроверка перестанет вам докучать. Но искать опечатки будет сложнее.

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

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

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

a.example_6 {

display: inline-block;

color:#ffeb3b;

line-height: 1;

text-decoration:none;

cursor: pointer;

position:relative;

border: none;

}

a.example_6:after {

background-color: #ffeb3b;

display: block;

content: «»;

height: 2px;

width: 0%;

left:50%;

position:absolute;

-webkit-transition: width .3s ease-in-out;

-moz—transition: width .3s ease-in-out;

transition: width .3s ease-in-out;

-webkit-transform:translateX(-50%);

-moz-transform:translateX(-50%);

transform:translateX(-50%);

}

a.example_6:hover:after,

a.example_6:focus:after {

width: 100%;

}

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

Как сделать плавное подчеркивание ссылки!? Просто нужно написать соответствующие стили для плавного подчеркивание ссылки, либо же прямо здесь скопировать их!

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

a.example_5 {

display: inline-block;

color:#ffeb3b;

line-height: 1;

text-decoration:none;

cursor: pointer;

border: none;

}

a.example_5:after {

background-color: #ffeb3b;

display: block;

content: «»;

height: 2px;

width: 0%;

-webkit-transition: width .3s ease-in-out;

-moz—transition: width .3s ease-in-out;

transition: width .3s ease-in-out;

}

a.example_5:hover:after,

a.example_5:focus:after {

width: 100%;

}

Оформление текста с помощью линий. Свойство text-decoration и другие

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

Значения свойства text-decoration

CSS

text-decoration: none | underline | overline | line-through

1	text-decorationnone\|underline\|overline\|line-through

Значения означают:

— подчеркнутый текст.
— линия над текстом (надчеркивание).
— перечеркнутый текст;
— подчеркивание, перечеркивание или надчеркивание отсутствует (значение по умолчанию для всех элементов, кроме ссылок)

В этом свойстве на самом деле можно выделить 3 отдельных свойства:

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

Давайте протестируем на примере свойство вместе с дополнительными свойствами для оформления линий.

Quibusdam autem aperiam, dolore magnam cum, dicta facere maiores dolor consequuntur eum reprehenderit sed assumenda fugit dolorum impedit sequi ratione iure at suscipit ipsum recusandae mollitia adipisci. Deleniti, ab harum. Deleniti quos tenetur reprehenderit beatae qui debitis praesentium obcaecati totam?

text-decoration

text-decoration-line

text-decoration-style

text-decoration-color

Вы также можете использовать 3 свойства вместе в виде составного свойства text-decorati0n:

Составное свойство text-decoration

CSS

text-decoration: text-decoration-line text-decoration-color text-decoration-style;

Например,
text-decoration: underline red dashed;

1
2
3
4

text-decorationtext-decoration-linetext-decoration-colortext-decoration-style;

Например,

text-decorationunderlinereddashed;

Пример в реальном виде:

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

Рисуем линии в программе Microsoft Word

Если вы хотя бы иногда пользуетесь текстовым редактором MS Word, наверняка знаете о том, что в этой программе можно не только набирать текст, но и выполнять ряд других задач. О многих возможностях этого офисного продукта мы уже писали, при необходимости, вы можете ознакомиться с этим материалом. В этой же статье мы расскажем о том, как в Ворде нарисовать линию или полоску.

Создаем обычную линию

1. Откройте документ, в котором необходимо нарисовать линию, или создайте новый файл и откройте его.

2. Перейдите ко вкладке “Вставка”, где в группе “Иллюстрации” нажмите кнопку “Фигуры” и выберите подходящую линию из списка.

Примечание: В нашем примере используется Ворд 2016, в предыдущих версиях программы во вкладке “Вставка” есть отдельная группа “Фигуры”.

3. Нарисуйте линию, нажав левую кнопку мышки в ее начале и отпустив в конце.

4. Линия заданной вами длины и направления будет нарисована. После этого в документе MS Word появится режим работы с фигурами, о возможностях которого читайте ниже.

10 ответов

Лучший ответ

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

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

145

Alfred Xing
10 Июл 2014 в 18:07

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

Shakeel Ahmed
13 Июл 2016 в 07:53

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

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

HTML:

CSS:

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

animuson
29 Янв 2014 в 22:26

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

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

Fatima Waheed
11 Июл 2016 в 14:14

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

anatoly techtonik
26 Дек 2015 в 06:54

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

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

Darshana Gunawardana
9 Окт 2018 в 10:19

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

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

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

Mona Jalal
5 Фев 2020 в 00:12

Может, я немного опоздал, но просто используйте , это единое свойство CSS, которое можно использовать везде.

Встроенный HTML

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

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

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

BarryCap
14 Авг 2021 в 10:46

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

Neel
24 Янв 2020 в 07:16

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

-2

mirichan
1 Сен 2015 в 08:00

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

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

div#main_text a.example_99 {

text-decoration: none;

border-bottom: 1px solid red;

border-left: 1px solid green;

padding-left: 6px;

border-top: 1px solid #ffeb00;

padding-top: 6px;

border-right: 1px solid #ce00ff;

padding-right: 6px;

padding-bottom: 6px;

}

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

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

div#main_text a.example_99_1{text-decoration: none; border:none;}

div#main_text a.example_99_1:hover {

text-decoration: none;

border-bottom: 1px solid red;

border-left: 1px solid green;

padding-left: 6px;

border-top: 1px solid #ffeb00;

padding-top: 6px;

border-right: 1px solid #ce00ff;

padding-right: 6px;

padding-bottom: 6px;

}

Изменение регистра символов. Свойство text-transform

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

— все строчные;
— все заглавные;
— каждое слово начинается с большой буквы;
— отменяет изменение регистра (по умолчанию).

Тестируем все варианты:

Officiis eos, minima libero facilis omnis quidem sint ipsa, sit voluptates enim esse repellendus mollitia in hic dolorem cum perferendis temporibus accusamus. Quod commodi voluptates doloremque distinctio ad, corporis incidunt nihil consequatur perspiciatis ea repudiandae ipsam velit. Totam, asperiores adipisci!

text-transform

Другие способы подчеркивания в CSS

Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – Safari для Mac и iOS).

border-bottom

Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.

Результат интерпретации браузером этого кода.

Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени. Но выделение будет очень уродливым. Также верстальщик имеет возможность применять переходы и анимации к подстрочной линии. Например, можно реализовать изменение цвета в течение какого-то времени. Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.

box-shadow

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

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

Но у этого способа есть недостатки. Прежде всего, ограниченность в фоне. Также невозможно регулировать стиль подчеркивания. Пример кода:

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки. Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline; Выглядит это так.

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться. Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.

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

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами ):

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

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

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom, которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed, получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

Пример 3. Пунктирное подчёркивание для ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
color: blue; /* Цвет ссылок */
text-decoration: none; /* Убираем подчёркивание */
}
a:hover {
border-bottom: 1px dashed blue; /* Добавляем синее пунктирное подчёркивание */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none, чтобы одновременно не получилось две линии (рис. 1).

Рис. 1. Использование пунктира для выделения ссылки

Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.

Пример 4. Двойное подчёркивание ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
color: blue; text-decoration: none;
}
a:hover {
border-bottom: 4px double red;
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

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

Использование ::after и content

Также можно сделать искусственную линию через комбинацию свойства content и псевдоэлемента ::after. Они лишь будут выводить пустой псевдоэлемент после заголовка, а уже вид этого псевдоэлемента определяется другими свойствами. На рис. 3 показана подобная линия.

Рис. 3. Линия, созданная через ::after

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

Пример 3. Использование ::after

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
h2 {
position: relative; /* Относительное позиционирование */
display: inline-block; /* Линия на ширину текста */
}
h2::after {
content: ‘; /* Выводим пустое содержимое */
position: absolute; /* Абсолютное позиционирование */
background: red; /* Цвет линии */
left: 0; /* Положение линии слева */
bottom: -5px; /* Положение линии */
width: 100%; /* Линия на ширину текста */
height: 2px; /* Высота линии */
}
</style>
</head>
<body>
<section>
<h2>Культурный речевой акт в XXI веке</h2>
<p>Действительно, мифопорождающее текстовое устройство
иллюстрирует дискурс, и это придает ему свое звучание,
свой характер.</p>
</section>
</body>
</html>

Линии и рамки

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

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

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

Подчёркнутый текст читается хуже, чем обычный. С учётом того, что чтение с экрана по сравнению с чтением с листа бумаги менее комфортно, данный фактор становится важным для повышения удобства восприятия информации.
На веб-страницах подчёркивание ссылок стало определённым стандартом. Когда мы видим на сайте подчёркнутый текст, то воспринимаем его в силу привычки как ссылку. Если это не так, возникает раздражение: почему этот текст выглядит как ссылка, но при этом ссылкой не является?

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

Для добавления подчёркивания есть два основных метода. Первый заключается в использовании свойства text-decoration со значением underline, как показано в примере 1.

Пример 1. Свойство text-decoration

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
.dot {
text-decoration: underline;
}
</style>
</head>
<body>
<h1 class=»dot»>Часть 4, в которой Пол и
Пропилен наносят ответный удар</h1>
</body>
</html>

Результат данного примера показан на рис. 2. Цвет и толщина такой линии устанавливаются браузером самостоятельно в зависимости от размера и цвета текста и не могут быть изменены через стили. Кстати, это же свойство со значением none применяется для того, чтобы убрать подчёркивание у текста, например, у ссылок.

Рис. 2. Вид линии, полученной с помощью text-decoration

Второй метод позволяет установить линию произвольного стиля и цвета через свойство border-bottom. Например, для добавления пунктирного подчёркивания у ссылок используем значение dashed. Чтобы подчёркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовём его, скажем dot. Также необходимо убрать исходное подчёркивание у ссылок (пример 2).

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

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

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

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

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

Обратите внимание на некоторые моменты. Линия, полученная через border-bottom, располагается чуть ниже традиционного подчёркивания

При добавлении такой линии к блочным элементам, вроде

, линия будет не под текстом, а занимать всю ширину элемента.

Выравнивание текста. Свойство text-align

В любом текстовом элементе вы можете выровнять текст по левому (), правому краю (), по центру () или по ширине ().

Свойство text-align

CSS

text-align: left (по умолчанию) | right | center | justify

1	text-alignleft(поумолчанию)\|right\|center\|justify

Смотрим на варианты применения свойства в действии

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde necessitatibus voluptas quasi odit, corrupti aut harum officiis molestiae delectus? Quos, quod natus. Quod expedita modi quos et numquam unde delectus maiores deleniti rem facere, optio beatae laboriosam maxime enim totam.

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Значения по умолчанию. Наследование от родителей (inherit). Значение initial

Каждое свойство из представленных ниже, как и вообще в CSS, имеет значение по умолчанию, которое применяется к тексту благодаря тому, что в любом браузере подключается таблица стилей браузера (user agent stylesheet), в которой эти свойства указаны и поэтому работают. Кроме того, для многих свойств существуют значения , которое означает «унаследовано от родителя», и , что значит «сброс до значения по умолчанию».

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

Посмотрите код примера.

See the Pen Inline-block columns by Elen (@ambassador)
on CodePen.0

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

Значение можно использовать для того, чтобы назначить какому-либо элементу то значение, которое заложено в родительском элементе. Так с его помощью, например, можно сделать ссылки того же цвета, что и основной текст (темно-серыми), а не синими по умолчанию. Пример можно увидеть ниже. Проанализируйте код на вкладках HTML и CSS.

See the Pen inherit color for link by Elen (@ambassador)on CodePen.0

В этой статье мы рассмотрим следующие свойства для форматирования текста:

Как вставить строку в Word (БЫСТРЫЙ И ЛЕГКИЙ способ) | Как сделать линию в Word 2016

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

13 Почему почему нельзя использовать CSS? Может быть, создать страницу как одно изображение и добавить строку с помощью mspaint?
Я не думаю, что это можно сделать без CSS
Вы должны использовать css, но это можно сделать с использованием фоновых изображений, нижняя граница — лучший подход
4 чувака. Я думаю, он сказал «без использования отдельного файла CSS», а не «без CSS». Поклоняйтесь новичкам.

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

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

В твоем <?php элемент, добавьте тег (ответ отредактировал)
2 вы также можете попробовать вместо того
Хорошее решение, и это возможно. Не заставляйте меня кодировать для этого js;)
Вот ответ с поддержкой многострочного текста stackoverflow.com/a/4365458/1078641

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

3 Это должен быть принятый ответ. Следуя блочной модели, используя пунктирную будет размещен за пределами и, таким образом, будет далек от текста.
3 Есть короткий синтаксис: где первый атрибут — линия, второй — цвет, а третий — стиль.
Спасибо Sos за улучшение

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

HTML:

CSS:

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

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

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

Это правильный ответ. Коротко и без CSS. Спасибо.
С HTML5 это действительно должен быть принятый ответ.

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

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

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

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

Свойства text-stroke и text-fill-color — контур и заливка символов текста

На данный момент свойство text-stroke является экспериментальным. В соответствии с названием оно позволяет задать контур для текста, который часто используют дизайнеры в таких программах, как Adobe Illustrator, Figma, Sketch или других приложениях для создания векторных изображений. В настоящее время свойство не включено ни в одну спецификацию W3C или WHATWG. При поиске этого свойства на MDN можно увидеть информацию только о свойстве , а также о составляющих его свойствах (ширина, или толщина контура) и (цвет контура), причем браузеры Mozilla Firefox, Opera и Microsoft Edge также поддерживают это свойство именно с префиксом , но не поддерживают пока без него.

Поддержка свойства современными браузерами очень хороша — 97% (проверьте сами на caniuse.com), но при наведении на любой из них вы увидите, что префикс должен быть именно :Синтаксис:

Синтаксис text-stroke

CSS

Пример:
-webkit-text-stroke: 4px pink;
text-stroke: 4px pink;

1
2
3
4
5
6

-webkit-text-stroke-webkit-text-stroke-width|-webkit-text-stroke-color|initial|inherit;

text-stroketext-stroke-width|text-stroke-color|initial|inherit;

Пример

-webkit-text-stroke4pxpink;

text-stroke4pxpink;

Составляющие свойства:

() — толщина контура (в любых единицах CSS).
() — цвет контура (любым доступным способом для ).

Пример использования :

See the Pen -webkit-text-stroke property by Elen (@ambassador)
on CodePen.0

В примере для указания размера шрифта и контура использованы css-единицы vmin, зависящие от минимальной ширины или высоты вьюпорта браузера, поэтому и шрифт, и контур будет изменяться вместе с размерами браузера.

В качестве дополняющего свойства для используется свойство , которое предназначено для заливки символов текста.

Значения задаются в виде всех доступных :

Значения text-fill-color

CSS

text-fill-color: color | initial | inherit;

1	text-fill-colorcolor\|initial\|inherit;

Если свойство не указано, используется значение свойства . По сути своей работы свойства и одинаковы, но имеет приоритет над , если они имеют разные значения. Это видно в примере выше, в которм свойство color имеет черный цвет (), а text-fill-color — темно-серый (). Мы видим, что символы текста залиты именно темно-серым цветом.

Оба свойства: и , и можно анимировать. Это сделано в примере при наведении на ссылки с помощью свойства .

Как сделать линию подчёркивания в тексте?

Если вы написали текст и вам нужно провести под ним прямую линию или подчеркнуть какое-то слово, предложение, в программе Word есть специальный инструмент подчёркивания. Чтобы его применить выполняем следующие действия:

Выделяем нижнее предложение, слово, которое нужно подчеркнуть.

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

Как в Word сделать жирную, пунктирную или двойную линию?

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

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

Если жирная линия должна быть за пределами текста, выбираем инструмент «Границы». Выбираем местоположение линии.

Нажав на ней правой кнопкой мыши, указываем цвет, толщину и размер линии.

Как сделать сплошную линию или линию под текстом?

На панели инструментов есть ещё одна кнопка, которую можно использовать для создания сплошной линии на всю ширину листа или линии под текстом.

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

Во вкладке «Главная» выбираем кнопку «Границы».

В данном случае нам нужно поставить линию между текстом. Выбираем «Внутренняя» граница. Если линию нужно поставить в конце текста – «Нижняя линия».

Как в сделать горизонтальную и вертикальную линии?

Ровную горизонтальную и вертикальную линии можно создать предыдущим способом с помощью инструмента «Границы». В нём есть варианты горизонтальной и вертикальной линии. Если же линию нужно провести в произвольном порядке, используем следующий способ.

Переходим во вкладку «Вставка» и выбираем «Фигуры».