Как я могу создать собственное подчеркивание или выделение текста в html или css?

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


text html css underline
person Luka Gavasheli    schedule 28.04.2017    source источник

Ответы (4)


arrow_upward
13
arrow_downward

Используйте элемент ‹mark> и настройте высоту строки

mark {
  display: inline-block;
  line-height: 0em;
  padding-bottom: 0.5em;
}
<h1><mark>Lorem ipsum</mark></h1>

person caramba    schedule 28.04.2017
comment
Я только недавно узнал, что этот элемент вообще существует. Теперь я знаю почему :) - person somethinghere; 28.04.2017
comment
@somethinghere меня к! Мне просто нужно было просмотреть этот список несколько дней назад. . Список не такой большой, но полезно знать... - person caramba; 28.04.2017
comment
Я тоже не так давно узнал через htmlreference.io. Звучит как устаревший элемент, напоминающий мне marquee. Кроме того, оказывается, я достаточно взрослый, чтобы думать, что... - person somethinghere; 28.04.2017
comment
Есть идеи, как заставить это работать с многострочными заголовками? - person AndreLung; 06.08.2019

arrow_upward
6
arrow_downward

В очень хорошей статье объясняется хороший способ сделать это с помощью градиентов: https://thirtyeightvisuals.com/blog/low-highlight-heading-links-squarespace

.highlight {
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
}
person Qortex    schedule 18.09.2019

arrow_upward
2
arrow_downward

Для этого я обычно использую SVG-пиксель (растягивающийся SVG-код в формате HTML 1x1 с цветом заливки), которым мы можем управлять так, как захотим:

h1 {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='1' height='1' fill='red' /%3E%3C/svg%3E") no-repeat 100% 100%;
  background-size: 100% 50%;
}
<h1>My Text</h1>

Это также позволяет легко добавлять анимации. Однако это работает только для однострочных элементов. Вы можете изменить цвет внутри свойства svg fill. В закодированном виде он работает в IE9+, так что вполне совместим! Просто помните, что знак решетки перед шестнадцатеричными цветами также должен быть закодирован - его %23 (лично я использую sass для его кодирования для меня).

person somethinghere    schedule 28.04.2017
comment
Мне нравится твой ответ! +1 - person caramba; 28.04.2017

arrow_upward
-1
arrow_downward

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

person Community    schedule 28.04.2017
comment
Что line-size? И как line-height на это влияет? Это не так. - person somethinghere; 28.04.2017