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

Обновлено: 04.07.2024

Если социальная сеть, платформа для блогов или форум предоставляют возможность размечать текст при помощи HTML или BBCode, перечёркивать или подчёркивать текст не составляет труда: можно пользоваться тегами s и u обеих разметок или назначать стили в HTML. Но что делать, если у нас есть только голый текст? Или, например, нам нужно зачеркнуть/подчеркнуть слово в заголовке страницы, отображаемом в заголовке вкладки или всего браузера, или оформить слово в заголовке форумного поста — короче говоря, всюду, где не работает разметка?

Можно рискнуть и воспользоваться средствами Юникода.

II. Нужные символы

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

1. Зачёркивание. Символ Юникода под номером U+0336 (в десятеричной нотации 822). В статье по ссылке можно увидеть и другие, более экзотические виды зачёркивания с соответствующими символами, но нам пока хватит и такого, тем более что он наиболее симулирует эффект привычных тегов. Если вставить по такому символу после каждого знака в тексте, ̶в̶ы̶г̶л̶я̶д̶е̶т̶ь̶ ̶э̶т̶о̶ ̶б̶у̶д̶е̶т̶ ̶в̶о̶т̶ ̶т̶а̶к̶ ̶ (для пущей убедительности лучше прихватывать дополнительные обрамляющие пробелы).

2. Пунктирное подчёркивание. Символ Юникода под номером U+0331 (в десятеричной нотации 817). Подчёркнутый им текст в̱ы̱г̱л̱я̱д̱и̱т̱ ̱в̱о̱т̱ ̱т̱а̱к̱.

3. Почти сплошное подчёркивание. Символ Юникода под номером U+0332 (в десятеричной нотации 818). Подчёркнутый им текст в̲ы̲г̲л̲я̲д̲и̲т̲ ̲в̲о̲т̲ ̲т̲а̲к̲.

III. Как вводить вручную

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

1. Зачёркивание: Alt + +(0)336 или Alt + (0)822
2. Пунктирное подчёркивание: Alt + +(0)331 или Alt + (0)817
3. Почти сплошное подчёркивание: Alt + +(0)332 или Alt + (0)818

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

IV. Сетевые сервисы автоматизации

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

V. Букмарклеты

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

1. Оформление всего текста в любом активном текстовом поле

Достаточно совсем простого кода (он работает даже в IE8):

Подчеркнуть всё пунктиром:

Подчеркнуть всё почти сплошной линией:

2. Оформление выделенного текста в любом активном текстовом поле

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

Можете сохранить букмарклеты cо следующим кодом у себя в закладках:

Подчеркнуть выделенное пунктиром:

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

VI. Подводные камни

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

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

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

3. Некоторые версии браузеров вообще отказываются видеть в этих символах нужные знаки Юникода. Возможны глюки как на стадии создания первоначального текста, так и при перепостах и цитировании.

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

Нижнее подчеркивание на клавиатуре

Подчеркивание фразы в тексте

Выделение полей в документе

Откройте новый документ в текстовом редакторе Ворд. Ставим курсор мышки вначале первой строки.

Алгоритм действий для подчеркивания текста на экране ноутбука будет таким же. Сложность может возникнуть только из-за отсутствия мышки для выделения фразы в тексте.

Как сделать нижнее подчеркивание с помощью панели инструментов

Microsoft Word 2003

Примечание! Что бы изменить цвет или тип стандартной линии пользователю нужно изучить главную панель меню.

Microsoft Word от 2007 года и выше

Непрерывная горизонтальная линия при помощи иллюстраций

Выделение отдельных слов чертой

Подчеркивание текста в документе, предназначенном для печати

Подчеркивание пробелов в веб-документе

Щелкните мышкой в месте, где нужно будет вставить знак.

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

Кликните мышью на пустом месте в любой ячейке.

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

Сейчас существует много способов, с помощью которых можно легко и просто выполнять текстовое форматирование. Вы можете сделать слова подчеркнутыми, курсивными или менять толщину шрифта. Однако этот функционал почему-то не доступен во многих социальных сетях. В этой статье мы разберем, как сделать ~~зачеркнутый текст в ВК~~. Показан метод, который работает на компьютерах и мобильных телефонах в 2022 году. Также на этой странице Вы найдете специальный онлайн генератор, который поможет решить задачу.

Онлайн генератор зачеркнутого текста для Вконтакте

Внимание! После нововведений VK 2020 года зачеркивание может работать некорректно после обновления браузера на компьютере (слетает форматирование). Однако в официальном мобильном клиенте результат сохраняется и отображается корректно.

Как сделать зачеркнутый текст в ВК вручную

Инструкция как сделать зачеркнутый текст в Контакте

Результат в официальном приложении:

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

Примечание 1: данная инструкция работает, на персональных компьютерах, так и мобильных телефонах с официальным клиентом Контакта.

Заключение

Теперь Вы знаете, как сделать зачеркнутый текст в ВК. Инструкция очень простая. После её прочтения с зачеркиванием символов справится даже пользователь начального уровня. Если же у Вас возникли вопросы, то задайте их в комментариях.

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

При создании ссылок или анимаций для кнопок меню у вас может возникнуть необходимость использовать подчеркивание. Из этой статьи вы узнаете о нескольких способах создать эффект подчеркивания с использованием CSS-свойств text-decoration , border-bottom , background-image , box-shadow , а также при помощи SVG.

CSS-свойство text-decoration

Свойство text-decoration — самый простой способ подчеркнуть текст. Но этому способу не хватает настраиваемости, и это проблема. Более продвинутые в этом смысле способы подчеркивания мы рассмотрим чуть дальше по тексту.

Давайте посмотрим, как при помощи text-decoration можно сделать простое подчеркивание.

Свойство text-decoration — это сокращенный вариант записи трех других свойств:

Вот несколько примеров:

Чтобы убрать подчеркивание, нужно просто указать text-decoration: none .

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

Альтернативой свойству text-decoration может послужить свойство border-bottom . С его помощью вы также можете задать внутренний отступ (padding) и отодвинуть линию подчеркивания от текста. В следующем примере первая ссылка создана при помощи свойства text-decoration , а вторая — при помощи border-bottom :

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

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

При помощи свойства background: linear-gradient и других свойств фона можно создать градиентное подчеркивание. Вот пример:

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

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

При помощи свойства transform можно сделать короткое подчеркивание скошенной линией.

Правила, касающиеся этого подчеркивания:

Подчеркивание заголовка

Чтобы подчеркнуть заголовок, можно использовать свойство text-decoration: underline;, но при помощи свойства border-bottom можно сделать красивее. Правда, в последнем случае вам нужно добавить display: inline; , чтобы подчеркивание не было длиннее самого слова.

Многострочное подчеркивание

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

В приведенных ниже примерах использовано свойство background-image , поскольку оно позволяет захватить несколько строк. И хотя вы можете использовать настоящие изображения, в нашем случае это просто линия. Мы используем линейный градиент, чтобы генерировать изображение.

background-repeat: repeat-x; делает подчеркивание горизонтальным.

Если изменять второе значение в background-position: 0 100%; , можно регулировать, насколько далеко от верха должно быть подчеркивание.

Также можно менять второе значение в background-size: 100% 3px; , чтобы подобрать нужную высоту подчеркивания.

Кроме того, можно сделать так, чтобы многострочное подчеркивание показывалось только при наведении курсора.

Для начала нужно удалить дефолтное значение text-decoration .
Использование background-image позволяет охватить несколько строк. Поскольку мы хотим, чтобы подчеркивание было того же цвета, что и ссылка, мы используем currentColor и для начала, и для конца градиента. currentColor велит браузеру использовать цвет элемента из основного свойства цвета.
При помощи background-position мы задаем позицию изображения в нижнем левом углу. В нашем примере 0% означает горизонтальное позиционирование, а 100% — вертикальное. Также мы отключаем background-repeat , чтобы предотвратить создание нескольких экземпляров изображения. Эти два свойства можно записывать при помощи короткого формата записи ( background: no-repeat 0 100%; ).
При помощи background-size мы указываем нулевую ширину и высоту в 2 px. Нулевая ширина означает, что подчеркивание будет видимым только при наведении.
Устанавливаем для свойства transition значение background-size и скорость изменения 0,3 секунды.
При наведении курсора на ссылку мы меняем ширину изображения на 100%. Таким образом текст становится полностью подчеркнутым, а кроме того создается анимация.

Использование изображений в качестве подчеркивания в CSS

Для стилизации подчеркивания в CSS также можно использовать изображения (в формате SVG или PNG). Ниже приведены примеры (на основе CodePen автор John D. Jameson).

Анимированное подчеркивание при наведении

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

Вот общие стили для четырех примеров (специфические стили будут приведены ниже):

Мы удаляем стандартное значение text-decoration и добавляем границу (border) при помощи псевдоэлементов CSS. Используя свойство CSS transition , мы анимируем этот border.

Анимированное подчеркивание при наведении № 1

Анимированное подчеркивание при наведении № 2

Анимированное подчеркивание при наведении № 3

Анимированное подчеркивание при наведении № 4

Анимированное подчеркивание, созданное при помощи свойства box-shadow

Подчеркивание также можно создать при помощи свойства box-shadow , которое добавляет тень к HTML-элементу. При наведении тень может увеличиваться. Посмотрите на пример:

Здесь мы добавили к элементу две тени:

inset меняет тень с внешней (outset) на внутреннюю
0 -30px 0 rgba(50,85,127,0.5) : 0 — это смещение по горизонтали, -30px — смещение по вертикали, 0 — радиус размытия, а rgba(50,85,127,0.5) — полупрозрачная голубая тень.
0 2px 0 rgba(50,85,127,0.5) : 0 — смещение по горизонтали, 2px — смещение по вертикали, 0 — радиус размытия.

Почитать больше о тенях можно здесь.

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

Подобные эффекты мы создадим при помощи масштабируемой векторной графики (SVG). У нас будет HTML-элемент для SVG и блок для текста со ссылками (выбирайте или .ink-svgline , или .link-svgmarker ).

Вот правила CSS, позволяющие спрятать этот элемент:

А эти правила будут общими для обоих примеров:

Первый пример подчеркивания с использованием SVG:

Читайте также: