Как в css сделать подчеркивание: Как сделать подчеркивание через CSS
Содержание
Как сделать подчеркивание в стиле волны в навигации (CSS)?
Таким образом, в большинстве случаев подчеркивание (как выделение) текущего навигационного элемента-это просто строка. Есть ли способ сделать его волнистым (как волны под текстом меню)? А можно ли сделать несколько слоев волн (так это выглядит как прилив)?
html
css
Поделиться
Источник
Bitsnapper
31 октября 2015 в 11:50
4 ответа
- CSS подчеркивание
Чтобы подчеркнуть текст в CSS, мы можем сделать: h4 {text-decoration:underline;} Однако это только подчеркивает текст, заключенный в тег h4. Что делать, если вы хотите, чтобы подчеркивание шло по всей странице? Спасибо
- Пользовательское подчеркивание тега в css
У меня есть div, внутри которого есть заголовок, и я хочу подчеркнуть заголовок таким образом, чтобы подчеркивание покрывало приблизительно 80% div с отступом 10% с обеих сторон. Кроме того, я хочу, чтобы подчеркивание было на несколько пикселей ниже заголовка. Я пытаюсь это сделать В части html…
1
Волнистое подчеркивание определено в спецификациях CSS, но на данный момент (октябрь 2015 года) Firefox- единственный браузер , который его поддерживает :
.error {
color: inherit;
text-decoration: underline; /* All browsers */
text-decoration-color: red; /* Firefox only */
text-decoration-style: wavy; /* Firefox only */
}Have you seen the <a href="#">laetst</a> Star Wars movie yet?Для решения , которое работает во всех браузерах, вы можете использовать фоновое изображение :
.error {
color: inherit;
text-decoration: none;
background: url(http://www.phpied.com/images/underline.gif) bottom repeat-x;
}Have you seen the <a href="#">laetst</a> Star Wars movie yet?Поделиться
John Slegers
31 октября 2015 в 11:57
1
Просто используйте data:image/png;base64 , формируя одну волну на сетке (например) 10×10 пикселей.
Настройка размера фона для желаемого волнового эффекта.
Работа Fiddle здесь
работа над ним в течение некоторого времени должна достичь желаемого эффекта.
a {
line-height: 15px;
font-size: 15px;
text-decoration: none;
position: relative;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAH0lEQVQYlWNgGObgPxQTVISNjVMRTjF8Vv0nRhFcDQDv1Qn3IBa3OQAAAABJRU5ErkJggg==) repeat-x;
background-position: bottom;
background-size: 10% 30%;
}<a href="#null">text of the anchor</a>Поделиться
holden
31 октября 2015 в 13:32
0
То, что вы пытаетесь сделать, может быть достигнуто с помощью графики SVG.
Моя рекомендация была бы:
- Создайте кривую в нужной вам форме. Включите элемент
SVG непосредственно после ссылки меню в свою разметку. - Расположите его абсолютно под ссылкой.
- Скрыть элемент SVG от пользователя, вы можете использовать для этого visibility:hidden или display:none в зависимости от вашего макета и того, что будет работать в вашей ситуации.
- Используйте CSS для создания правила, чтобы при наведении указателя мыши на ссылку для элемента SVG было установлено значение display:block или display:inline-block (в зависимости от вашего макета).
Это имеет некоторые преимущества по сравнению с использованием графики в том, что легко изменить цвет, применить хороший градиент к цвету или изменить его размер.
Для получения информации о создании кривых SVG перейдите по этой ссылке (см. раздел PATHS):
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes
Возможно, вам будет проще использовать графический инструмент SBG, а не пытаться написать свою собственную разметку! Один из таких инструментов можно найти в Интернете здесь:
http://svg-edit.googlecode.com/svn- history/r1771/trunk/editor/svg-редактор.html
Поделиться
Phil Blunt
31 октября 2015 в 12:24
- Подчеркивание круглой крышки в CSS
Можете ли вы сделать подчеркивание круглой крышки (как на приведенном выше рисунке) с помощью CSS? Как? Есть ли способ сделать это с border-bottom ? Вместо этого border-radius производит этот стильный эффект:
- Что означает подчеркивание «_» в CSS?
Я только что нашел следующий фрагмент в файле CSS: position: fixed; _position: absolute; Что означает это подчеркивание перед вторым утверждением position ?
0
Еще один способ сделать то же самое. Для этого можно использовать текстовое оформление .
text-decoration-skip-ink: none; можно нарисовать по всей длине текстового содержимого.
.highlight-1 {
text-decoration: red wavy underline;
text-decoration-skip-ink: none;
}
.highlight-2 {
text-decoration: blue wavy underline overline;
text-decoration-skip-ink: none;
}<p>
The <span>Pixel 4</span> is right around the corner.
</p>
<p>
The <span>Qualcomm Snapdragon 855</span> is expected to be the chipset of choice for the Pixel 4 devices, with reports of 6GB of RAM support.
</p>Поделиться
Penny Liu
19 сентября 2019 в 14:40
Похожие вопросы:
CSS переход подчеркивание показать
Я пытаюсь сделать переход CSS, в котором подчеркивание появляется снизу вверх, когда вы наводите курсор на элемент href. Я нашел этот пример,который создает подчеркивание, появляющееся слева направо…
Как отправить более одного объекта между контроллерами в иерархическом стиле навигации в Apple watch?
Я разрабатываю приложение для Apple watch. Я толкаю контроллер интерфейса от другого контроллера интерфейса ,как отправить более одного объекта между контроллерами в иерархическом стиле навигации?
Как создать двойное пунктирное подчеркивание для текста в css
Как мы можем создать двойное пунктирное подчеркивание в CSS ? Я использую свойство border-bottom. border-bottom: 1px dotted #oof Но появляется только одно пунктирное подчеркивание. Как мы можем…
CSS подчеркивание
Чтобы подчеркнуть текст в CSS, мы можем сделать: h4 {text-decoration:underline;} Однако это только подчеркивает текст, заключенный в тег h4. Что делать, если вы хотите, чтобы подчеркивание шло по…
Пользовательское подчеркивание тега в css
У меня есть div, внутри которого есть заголовок, и я хочу подчеркнуть заголовок таким образом, чтобы подчеркивание покрывало приблизительно 80% div с отступом 10% с обеих сторон. Кроме того, я хочу,…
Подчеркивание круглой крышки в CSS
Можете ли вы сделать подчеркивание круглой крышки (как на приведенном выше рисунке) с помощью CSS? Как? Есть ли способ сделать это с border-bottom ? Вместо этого border-radius производит этот…
Что означает подчеркивание «_» в CSS?
Я только что нашел следующий фрагмент в файле CSS: position: fixed; _position: absolute; Что означает это подчеркивание перед вторым утверждением position ?
CSS подчеркивание меньше ширины заголовка?
Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h2: h2 { font-weight: 300; display: inline-block; padding-bottom:…
Подчеркивание с угловатыми краями в CSS
Как я могу сделать подчеркивание с угловыми краями в CSS, как показано на рисунке ниже? Спасибо вам за любую помощь.
Не удается удалить подчеркивание linkbutton
В моей веб-форме у меня есть кнопка linkbutton, определенная как…. <asp:LinkButton Visible=True style=text-decoration:none;color:blue; Font-Underline=false runat=server ID=lnkEditCarOrderNumber…
CSS — Подчеркивание текста, но игнорирование пробелов
У меня есть пара ссылок с левым краем 3px. Эти ссылки подчеркнуты и выглядят так:
<a href='#'>
test
</a>
К сожалению, внутри ссылки есть пробелы, и я не могу удалить их, так как у меня нет доступа к коду HTML. Эти пробелы также подчеркнуты, что меня не устраивает. Есть ли способ удалить их, не меняя HTML?
Вот fiddle, который показывает мою проблему: http://jsfiddle.net/e8quz /
Обновление:
Вот картинка, как я хочу, чтобы она выглядела:
css
space
underline
Поделиться
Источник
Matt3o12
20 апреля 2014 в 13:16
3 ответа
- CSS проблема оформления текста
У меня есть текстовое поле, которое было гиперссылкой, и проблема в том, что я пытаюсь удалить подчеркивание из текста гиперссылки. Параметр text-decoration:none; должен удалить его, но он, похоже, не работает. Как я могу удалить это подчеркивание из текста с гиперссылкой? HTML : <a…
- CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)
Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь! http://i.imgur.com/2JjFYWT.jpg http://codepen.io/anon/pen/lIjDp (пожалуйста, не обращайте внимания на…
6
Пробелы берутся из разрывов строк (хорошо известных из display:inline-block проблемных).
Поэтому сделайте свои a элементов display: block и переместите их влево.
DEMO
PS: display:block -это «redundant», так как float обычно уже устанавливает свойство отображения соответствующего элемента в «block». Но это не повредит …!
Поделиться
Netsurfer
20 апреля 2014 в 13:36
2
Смотрите здесь: http://jsfiddle.net/BWc2U/2/
Это также решит проблему. Нет необходимости делать их поплавками, с поплавками вам нужно очистить поплавки, иначе все содержимое после этого также будет плавающим и т. Д…
a {
margin-left: 5px;
display: inline-block;
}
Поделиться
JohanVdR
20 апреля 2014 в 13:42
1
Вы можете просто перемещать ссылки, чтобы пустое пространство исчезло, не редактируя html
a {
margin-left: 5px;
float: left;
}
http://jsfiddle.net/e8quz/2/
Поделиться
Anshul Sao
20 апреля 2014 в 13:43
Похожие вопросы:
Как создать двойное пунктирное подчеркивание для текста в css
Как мы можем создать двойное пунктирное подчеркивание в CSS ? Я использую свойство border-bottom. border-bottom: 1px dotted #oof Но появляется только одно пунктирное подчеркивание. Как мы можем…
Ограничьте подчеркивание текста
Я хотел бы иметь подчеркивание только для текста и в то же время сохранить часть изображения ссылки: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN…
CSS слишком длинное подчеркивание текста при применении интервала между буквами?
Всякий раз, когда letter-spacing применяется к чему-то с подчеркиванием или нижней границей, кажется, что подчеркивание выходит за пределы текста справа. Есть ли какой-нибудь способ сделать так,…
CSS проблема оформления текста
У меня есть текстовое поле, которое было гиперссылкой, и проблема в том, что я пытаюсь удалить подчеркивание из текста гиперссылки. Параметр text-decoration:none; должен удалить его, но он, похоже,…
CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)
Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…
CSS подчеркивание меньше ширины заголовка?
Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h2: h2 { font-weight: 300; display: inline-block; padding-bottom:…
CSS: удалить подчеркивание из текста
У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none…
CSS подчеркивание исчезает при использовании непрозрачности
В текущем стабильном Chrome при использовании следующего CSS, где установлена некоторая непрозрачность, подчеркивание текста исчезает. Когда непрозрачность установлена на 1 или удалена,…
matplotlib подчеркивание текста
Я пытаюсь добавить подчеркивание к одному из символов в plt.text. plt.text(.5,.5,r’\underline{O}H’) Это, кажется, не работает , я попытался использовать \overline{O} , который работает просто…
Python — PDFTables синтаксический анализ игнорирование пробелов между столбцами
Я пытаюсь разобрать таблицы pdf с помощью библиотеки pdftables python. Но это объединение столбцов и игнорирование пробелов. Вот мой код: pdf_page = get_pdf_page(fileobj, page) tables =…
сделать псевдоссылку с точечным подчеркивание · GitHub
сделать псевдоссылку с точечным подчеркивание · GitHub
Instantly share code, notes, and snippets.
сделать псевдоссылку с точечным подчеркивание
| .pseudo | |
| { | |
| text-decoration: none; | |
| position: relative; | |
| } | |
| .pseudo:after | |
| { | |
| border-bottom: 1px dotted blue; | |
| content: »; | |
| position: absolute; | |
| top: 0; | |
| bottom: 15%; | |
| left: 0; | |
| right: 0; | |
| } |
| <p><a href=»/»>обычная ссылка</a> просто текст <a href=»/»>ссылка</a> еще текст</p> |
| {«view»:»separate»,»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.
Подчеркнуть текст CSS: как подчеркнуть текст в CSS?
В общем веб-дизайне наиболее узнаваемым стилем по-прежнему остается синий текст с подчеркнутым , который наверняка вас куда-то приведет. Элемент ссылки имеет этот стиль по умолчанию, и это единственный цвет в режиме по умолчанию. Так что мы должны относиться к этому с уважением.
Хотя снаружи есть новый мир, и старые вещи улучшаются, по крайней мере, в несколько этапов. Элементы ссылок больше не нужно подчеркивать, а строка под текстом сегодня — это не просто идентификация ссылки.Этот краткий курс в основном посвящен опции подчеркивания text-decoration CSS и «связанным» параметрам.
Перво-наперво — если вам нужно быстрое, простое, регулярное подчеркивание, всегда есть HTML-элемент для него . Он собирается сделать строку в цвет текста на позиции по умолчанию из текста. Фактически, элемент просто добавляет текстовое оформление: подчеркивание текста с помощью встроенного в браузер CSS.
Хорошо, как вам это, вероятно, не понадобилось, следующие примеры включают решения CSS и, безусловно, решение вашей проблемы.
Есть два основных варианта добавления строки под текстом с помощью CSS.
Первый — это свойство text-decoration , которое определяет украшение, добавленное к тексту. Возможные значения этого свойства: подчеркивания, надстрочного и сквозного . Свойство text-decoration должно быть сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, но это пока плохо поддерживается. На данный момент у нас есть текстовое оформление, и с его помощью мы можем добавить строку под, поверх или через текст, с text-decoration-color мы можем раскрасить эту строку и с text-decoration-style , мы можем сделать это двойной, пунктирный, штриховой или волнистый.
Второе решение — своего рода взлом, подразумевающее использование border-bottom . Свойство display в этом случае должно быть inline . С помощью этого решения мы можем контролировать положение линии с помощью свойства padding-bottom , толщины линии с border-bottom-width , стиля с border-bottom-style и цвета с border-bottom- цвет . Border-bottom-style имеет те же параметры, что и text-decoration-style, и некоторые параметры 3D-эффекта.Эта опция предлагает больше опций и переменных, но ее сложнее использовать.
Сделать точечно-волнистое подчеркивание еще невозможно. Жду его 🙁
Этот пост изначально был опубликован в блоге Kolosek.
Как подчеркивать заголовки с помощью CSS | Учебник | Пример | Октябрь 2021 г.
Возможны два решения:
1. Вы можете использовать свойство text-decoration. Этот метод позволяет подчеркнуть текст тем же цветом, что и сам текст.В этом случае вы можете использовать следующий код.
Файл Test.css
h3 {
шрифт: 16px Arial, Geneva, Helvetica, без засечек;
оформление текста: подчеркивание;
}
Файл Test.html
Как подчеркнуть заголовки с помощью CSS <мета http-эквив = «тип-контента» контент = »текст / html; charset = utf-8 ″ />
Акции падают, поскольку Сэнди закрывает рынки США
Акции во всем мире упали, а бензин вырос из-за урагана «Сэнди», который угрожал U.Нефтеперерабатывающие заводы восточного побережья и закрытые торги акциями. Двухлетние итальянские облигации упали шестой день подряд, а евро ослаб.
На следующем рисунке показан результат:
Добавление подчеркивания к заголовку с помощью оформления текста
2. Вы можете добавить нижнюю границу к заголовку. Это решение более гибкое, потому что вы можете разделить подчеркивание и заголовок с помощью отступов, и вы можете изменить цвет подчеркивания, чтобы он отличался от текста. Примечание. Эффект может немного отличаться в разных браузерах, и вам следует его протестировать. Следующий код иллюстрирует этот подход.
Файл Test.css
h3 {
шрифт: 16px Arial, Geneva, Helvetica, без засечек;
отступ: 2 пикселя;
нижняя граница: сплошная 1px #aaaaaa;
}
На следующем рисунке показан результат:
Добавление подчеркивания к заголовку с помощью нижней границы
Двойное подчеркивание и двойной текст с надчётом с помощью CSS
В этом уроке мы покажем, как сделать текст с двойным подчеркиванием и двойным надчётом с помощью CSS.
Для некоторых целей отображения или выделения вашего контента вам может потребоваться двойной подчеркнутый или двойной подчеркнутый текст на ваших веб-страницах. Поскольку свойства CSS для создания двойных линий над или под текстом не существует, для создания этого эффекта следует использовать простой обходной путь.
Сначала мы дадим образцы для текста с двойным подчеркиванием и надчеркнутым текстом ниже, а затем поговорим о том, как добиться их создания с помощью простых стилей CSS:
Двойной подчеркнутый текст
Двойной подчеркнутый текст
Метод 1
В первом методе мы используем верхнюю или нижнюю границы с двойными линиями, чтобы создать такой эффект.Следующий код создаст текст с двойным подчеркиванием:
<стиль>
. двойное подчеркивание {
нижняя граница: 4 пикселя двойной;
}
Текст с двойным подчеркиванием
Причина, по которой мы отображаем наш текст в элементе span , заключается в том, что вы можете использовать элементы span в любом другом элементе, таком как подразделения (div) или абзацы (p).
Вы можете изменить ширину (4 пикселя) границы по своему желанию.Наименьшая ширина в пикселях, которую вы можете использовать, составляет 3 пикселя, так как при 2 пикселях линии соприкасаются друг с другом, в результате получается одна линия. Ниже вы можете увидеть двойные подчеркивания разных размеров:
Двойной подчеркнутый текст — ширина 3 пикселя
Двойной подчеркнутый текст — ширина 4 пикселя
Двойной подчеркнутый текст — ширина 5 пикселей
Чтобы создать двойную верхнюю линию с помощью этого метода, просто замените свойство border-bottom на свойство border-top .
Метод 2
Во втором методе мы используем свойства border-bottom / border-top и text-decoration для создания этого эффекта.Пожалуйста, проверьте приведенный ниже код, чтобы увидеть его в действии.
<стиль>
. двойное подчеркивание {
нижняя граница: сплошная 1px;
текст-оформление: подчеркивание;
}
Текст с двойным подчеркиванием
Вот результат кода выше:
Двойной подчеркнутый текст
Для создания двойной линии с помощью этого метода используйте следующий код:
<стиль>
.двойной надстрочный {
padding-top: 1px;
border-top: сплошной 1px;
текст-оформление: надстрочный;
}
Двойной текст с надписями
Двойной подчеркнутый текст
Первый метод, кажется, дает лучший результат, так как пространство между текстом и первой строкой выглядит лучше. Используйте тот метод, который, по вашему мнению, лучше всего подходит для вашего дизайна.
Как увеличить расстояние между текстом и подчеркиванием в CSS
К сожалению для веб-дизайнеров, CSS не предоставляет много возможностей для подчеркивания под текстами.У вас могут возникнуть трудности при попытке увеличить разрыв между текстом и его подчеркиванием.
В этом фрагменте мы покажем, как это сделать. Просто следуйте инструкциям ниже!
Создать HTML¶
Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.
Добавить CSS¶
div {
ширина: 400 пикселей;
}
охватывать {
padding-bottom: 10 пикселей;
нижняя граница: 1px solid # 1f67db;
высота строки: 48 пикселей;
} Здесь вы можете увидеть результат нашего кода.
Пример увеличения расстояния между текстом и его подчеркиванием: ¶
Название документа
<стиль>
div {
ширина: 400 пикселей;
}
охватывать {
padding-bottom: 10 пикселей;
нижняя граница: 1px solid # 1f67db;
высота строки: 48 пикселей;
}
Lorem Ipsum - это просто фиктивный текст для полиграфической и наборной индустрии.Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз и скремблировал его, чтобы сделать книгу образцов шрифта.
Попробуйте сами »
Результат
Lorem Ipsum — это просто фиктивный текст, используемый в полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.
В этом примере мы увеличили расстояние между текстом и подчеркиванием с помощью границы снизу. Вы можете контролировать пространство, используя свойства line-height и padding-bottom.
Давайте посмотрим на другой пример, где мы используем элемент внутри
. В этом примере мы также используем те же свойства border-bottom и padding-bottom для , что и в предыдущем примере, а также устанавливаем для свойства display значение «inline-block».
Пример увеличения расстояния между текстом и его подчеркиванием с использованием только
: ¶
Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.
Попробуйте сами » Однако у вас могут возникнуть трудности с использованием border-bottom, поскольку он не может обеспечить полный контроль над подчеркиванием. Чтобы добиться большей точности пикселей, вы можете использовать псевдоэлемент: after. Вы можете разместить подчеркивание там, где хотите, изменив значение свойства bottom.
Lorem Ipsum - это просто фиктивный текст полиграфической и наборной индустрии.Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.
Попробуйте сами »Невозможно увеличить расстояние между текстом и его подчеркиванием, если вы используете свойство text-decoration, установленное на« подчеркивание ». Подчеркивание жесткое. Я столкнулся с некоторыми из этих недостатков, когда хотел «позаимствовать» стиль из ссылок в блоге Кэсси Эванс. Ссылки там производят потрясающий эффект, когда вы наводите на них курсор: подчеркивание отступает и заменяется новым, оставляя немного места между ними, пока происходит переход. Проблема, с которой я столкнулся: ссылки в моем блоге часто переносятся на другую строку, а это означает, что часть ссылки не будет подчеркнута 😢. Круто не только ссылки на сайте Кэсси. Весь сайт, от кода до содержания. Цветное подчеркивание под ссылками, которое имеет эффект наведения, когда линия отступает и заменяется линией другого цвета. Ссылки, которые переходят на новые строки, должны иметь подчеркивание под всеми строками. Есть много разных способов подчеркнуть фрагмент текста.Метод, который я в итоге использовал, который отвечал всем требованиям, был: Использование CSS-свойства Фоновое изображение Почему я использую Потому что многие свойства для управления фоном работают, только если используется — вставить CSS — это жесткий мем здесь — Размер фона ограничен по высоте и занимает всю ширину элемента привязки путем установки Это все равно закроет весь фон, потому что теперь оно повторяется снова и снова, пока не покроет весь фон. Поэтому я остановил его, установив Линия находится наверху анкерного элемента! Позиционирование с Чтобы использовать и управлять несколькими фоновыми изображениями, установите несколько значений для свойств Первая запись в списке, разделенном запятыми, находится наверху, а каждая следующая запись находится на уровне позади нее. Фон следующего элемента привязки будет полностью черным ( a { background-image: linear-gradient (# 000000, # 000000), linear-gradient (#ffffff, #ffffff); } В примере ниже установлены два фона. Оба внизу, так что одно перекрывает другое. a { цвет: # dfe5f3; текстовое оформление: нет; фоновое изображение: линейный градиент (RGB (176, 251, 188), RGB (176, 251, 188)), linear-gradient (# feb2b2, # feb2b2); размер фона: 100% 2 пикселя, 100% 2 пикселя; background-position: 100% 100%, 0100%; фоновый повтор: без повтора, без повтора; } Обратите внимание, чем отличается положение фона Далее я буду переходить между одним фоном, обычно занимающим всю ширину, и без ширины при наведении курсора, в то время как второй фон делает обратное. Эта привязка будет влиять на то, из какой точки перемещается каждый фон. a { цвет: # dfe5f3; текстовое оформление: нет; фоновое изображение: линейный градиент (RGB (176, 251, 188), RGB (176, 251, 188)), linear-gradient (# feb2b2, # feb2b2); размер фона: 100% 2 пикселя, 0 2 пикселя; background-position: 100% 100%, 0100%; фон-повтор: без повтора; переход: размер фона 2с, линейный; } a: hover { background-size: 0 2px, 100% 2px; } Это почти соответствует поставленным целям.Единственное, чего не хватает, — это пробела между двумя строками. Это пространство можно подделать, переместив блок того же цвета, что и фон. Что лучше 2 фона? Три фона! Три фона .. ah ah ah 🦇 Я помещу этот фон поверх двух других, указав его первым в значении, разделенном запятыми, для Не забывайте! Ширина и высота задаются размером Чтобы сделать блок цвета фона невидимым перед наведением курсора на элемент привязки, фону дается отрицательная позиция фона После наведения на якорь блок должен переместиться на противоположную сторону подчеркивания, пока он снова полностью не исчезнет с экрана. Функция a { цвет: # dfe5f3; текстовое оформление: нет; фоновое изображение: линейный градиент (# 222b40, # 222b40), линейный градиент ( RGB (176, 251, 188), RGB (176, 251, 188) ), линейный градиент ( # feb2b2, # feb2b2); размер фона: 20 пикселей 2 пикселя, 100% 2 пикселя, 0 2 пикселя; background-position: calc (20px * -1) 100%, 100% 100%, 0100%; фон-повтор: без повтора; transition: background-size 2s linear, background-position 2s linear; } a: hover { background-size: 20px 2px, 0 2px, 100% 2px; background-position: calc (100% + 20px) 100%, 100% 100%, 0100%; } Тег привязки работает и подходит для любых целей! Большое спасибо Джею «Jh4y» Томпкинсу! Он волшебник со всем, что связано с CSS / анимацией, и я очень рад, что обратился к нему. Я задал ему вопрос, когда пытался в этом разобраться. Он не только ответил на него, но и научил меня упомянутой выше технике Я познакомился с Джеем на вечеринке корги. Изначально этот пост был опубликован здесь. Воспроизведено с разрешения. Подчеркивание CSS по умолчанию отлично работает. Кто мог это ненавидеть? Но всегда есть что улучшить. Вы можете подумать, что с подчеркиванием мало что можно сделать, но если вы углубитесь в CSS-анимацию, вы поймете, насколько много вы действительно можете! Я отсортировал бесчисленное количество стилей подчеркивания CSS и выбрал свои лучшие варианты для лучшего пользовательского подчеркивания в Интернете. Если что-то из этого привлекло ваше внимание, не стесняйтесь вмешиваться и попробовать поработать с исходным кодом. Если вы переместите курсор между этими ссылками, вы заметите что-то забавное. Эффект подчеркивания в навигационном меню фактически меняет стили между ссылками. Не только это, но он динамически перемещается по навигации, создавая иллюзию, что это один единственный блок. Довольно круто, правда? Вы можете сделать все это самостоятельно с помощью небольшого количества CSS, добавив блок подчеркивания в элемент HTML. Удивительно просто, учитывая, как мало кода вам нужно (около 60 строк CSS). Стили разрыва строки в CSS сложны, и их нелегко обойти. Но с некоторой изобретательностью разработчик Уилл Кинг построил это перо, создав эффект динамического подчеркивания, который может охватывать несколько строк без каких-либо ошибок. Обратите внимание, что здесь требуется немного JavaScript, чтобы строка оставалась нетронутой. Но он также достаточно динамичен, чтобы работать с любой ссылкой на странице, поэтому не имеет значения, как вы форматируете текст. Плюс ко всему здесь используется собственный градиент CSS3 для фона, что чертовски круто. Разработчик Райан Морс создал этот очень простой эффект скользящего подчеркивания, опираясь исключительно на CSS. Это довольно элегантное решение, учитывая, что для него даже не требуется дополнительный элемент HTML. Вы можете создавать свои навигационные меню, как любой другой сайт, и использовать этот эффект CSS для создания динамической скользящей анимации. Кроме того, все результаты могут быть изменены в коде CSS, который включает в себя замедление и общую продолжительность. На первый взгляд вы можете не заметить ничего особенного в этом подчеркивании.Но если вы сравните его с демонстрацией «по умолчанию» ниже на странице, вы увидите, что это действительно выглядит намного лучше. В улучшенном подчеркивании текста Лукаса Хорака вы заметите, что полоса под текстом лучше вписывается в нисходящие элементы. При этом учитываются такие формы букв, как «g» и «p», где строки опускаются ниже обычной высоты строки. Также само подчеркивание сдвигается чуть ниже под текстом, так что оно приобретает новый вид по сравнению с настройками браузера по умолчанию. Это уникальное перо обладает несколькими настраиваемыми эффектами подчеркивания, созданными с помощью чистого CSS разработчиком Мэтью Скоттом. Он может похвастаться четырьмя очень специфическими стилями подчеркивания, основанными на некоторых распространенных переходах CSS: Вы заметите, что это работает на общие переходы CSS3, которые работают как при наведении курсора на ссылку, так и при перемещении курсора за пределы ссылки. Определенно несколько классных эффектов, и все они довольно легко переносятся в свои собственные проекты. Вот еще один пакет настраиваемых анимаций подчеркивания, созданных разработчиком Ксесо. Они идут немного более экстремально с помощью стилей подчеркивания, подталкивающих тени CSS3 для эффектов свечения. Вы, вероятно, можете использовать это как шаблон для создания классного дизайна светового меча из «Звездных войн», если у вас есть время (или вы просто любите «Звездные войны»). Я видел этот эффект на нескольких веб-сайтах, и это, наверное, один из моих любимых.В раскрывающемся подчеркивании используется чистый CSS, и линия отображается в виде анимации с эффектом перехода. С этой анимацией у вас все еще остается ощущение, что каждая подчеркивающая «граница» соединяется с каждой ссылкой. Мне он нравится больше, чем линии, которые скользят между ссылками, потому что этот эффект кажется более быстрым и прямым. Если вам нужен настоящий минималистский подход к подчеркиванию эффектов, вам обязательно стоит попробовать поработать с этим кодом. Расширяющийся стиль подчеркивания можно найти в пакете подчеркивания, о котором я упоминал ранее.Но это конкретное подчеркивание немного отличается, потому что в нем используется настраиваемая синхронизация анимации. Обратите внимание, что функция cubic-bezier () используется для создания уникальной анимации при наведении курсора. Это выполняется немного быстрее, чем «линейный» переход по умолчанию, поэтому дает совсем другой эффект. И вы даже можете попробовать настроить анимацию Безье самостоятельно, чтобы создать уникальный стиль подчеркивания. Вот еще один стиль, который действительно может работать на любом веб-сайте.Разработчик Тристан Уилсон создал эти простые подчеркивания, которые обрамляют линию на несколько пикселей ниже текста. Это достаточно незаметно, чтобы заметить, но определенно не имеет большого значения в удобстве использования. Этот эффект действительно на эстетики больше, чем на лишнего удобства. Если вы хотите, чтобы ваши подчеркивания действительно выделялись среди всего стада, этот набор — отличное место для начала. Ранее я упоминал о настройке стилей подчеркивания для соответствия нижним нижним элементам шрифта.Эта ручка Джонатана Нила именно это и делает, и в ней не используются ничего, кроме HTML5 и CSS3. Весь эффект зависит от пары свойств CSS3: box-shadow и text-shadow , если быть точным. Это создает иллюзию того, что сбоку от спусковых элементов есть пространство, и придает подчеркиванию более стильный вид. Определенно отличный выбор для любого веб-сайта, а также отличный способ изменить цвет подчеркивания. Если вы действительно пытаетесь раздвинуть границы, попробуйте переделать это перо с помощью настраиваемого стиля градиента подчеркивания. Градиент проходит через CSS3, поэтому вы можете изменить цвета на все, что захотите. И если вы можете в это поверить, эта штука не требует для работы никакого дополнительного HTML . Просто настройте таргетинг на любые ссылки привязки, которые вы хотите, и скопируйте / вставьте коды CSS, чтобы получить свои собственные градиентные подчеркивания. Из всех этих дизайнов я, конечно, надеюсь, что есть один приятный эффект, который вы можете убрать из этой коллекции. Дизайнеры не всегда думают об эффектах подчеркивания, но с типографикой вы можете многое сделать, и если вы разбираетесь в CSS, то на самом деле нет предела. Сообщение «10 уникальных анимированных эффектов подчеркивания текста с помощью CSS» впервые появилось в журнале Speckyboy Web Design. Если мы насмехаемся над faux жирным и курсивом, почему мы не можем рассмотреть правильный отдельный шрифт с подчеркиванием , с подчеркиванием, являющимся частью каждого глифа? Можно мечтать? Это потенциально многообещающий, но в нашем случае ошибочный подход:
a {
текстовое оформление: нет;
положение: относительное;
}
a: after {
содержание: '';
ширина: 100%;
позиция: абсолютная;
слева: 0;
внизу: 1px;
ширина границы: 0 0 1px;
стиль границы: сплошной;
} Пример увеличения расстояния между текстом и его подчеркиванием с помощью псевдоэлемента :: after: ¶
Анимированное подчеркивание только для CSS.
Сложности возникают быстро, если вы хотите сделать что-нибудь более интересное, чем старый добрый CSS text-decoration: underline .Есть много разных техник. К сожалению, они почти всегда имеют существенные недостатки. Цель
Линии не должны касаться во время этой анимации, оставляя между ними некоторое пространство. Использовать фон
background-image . может быть сплошным цветом, определяя его как linear-gradient, переходящий от одного цвета к тому же цвету. background-image , а не background-color , если я собираюсь использовать сплошной цвет? background-image . background-size от до 2px и 100% соответственно. background-repeat на no-repeat . background-position , установленным на 0 100% , помещает его на левый край и на 100% от верхнего края элемента привязки.
Другими словами, внизу … Теперь внизу. Два фона
background- * , разделенных запятыми. # 000000 ). Белый ( #FFFFFF ) фон есть, но его не видно, потому что он закрыт черным.
Переход размера фона
, хотя оно не имеет видимого значения?
Один крепится к левой стороне, другой — к правой.
Три фона
Что это за блок? Как вы уже догадались: другой фон. background-image .
Первое значение для других свойств background- * теперь также указывает на это недавно добавленное background-image . background-size . В то время как высота установлена на тот же размер, что и другие фоны ( 2px в этом примере). На этот раз ширина будет довольно маленькой 20px . Переход позиции фона
, которая помещает его слева от элемента, и, таким образом, полностью за экраном. calc () используется для вычисления обеих этих позиций.
Tada 🎉
и позиции .
Он воспринял это как забавную задачу и сделал потрясающее доказательство своей концепции!
Это потрясающее место, в котором полно талантливых людей, приходите пообщаться! 10 уникальных эффектов анимированного подчеркивания текста с помощью CSS
1.Чередование подчеркивания
2. Объединение нескольких строк
3. Скользящее подчеркивание
4. Лучшее подчеркивание текста
5.Стили анимации
6. Другие стили анимации
7. Just Dropping In
8. Расширяющаяся анимация
9. Пользовательские подчеркивания CSS
10. Подгонка между нижними выносными элементами
11. Пользовательские градиенты
Ссылка на создание подчеркнута на Medium | автор: Marcin Wichary
5. Рисование с помощью