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

Иногда некоторые слова на веб-страничке требуется оформить так, что в html для этого не предусмотрено никаких тегов. Например, в css подчеркивание пунктиром, двойную линия и другие декоративные элементы оформления реализовать можно, потому что этот язык для этого и создан.

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

Для этого к нужному элементу нужно дописать свойство border (граница или рамка). Оно имеет три параметра:

Border: толщина линии | тип подчеркивания | цвет

Для легкого подчеркивания обычно достаточно задать толщину в 1-2 пикселя. А вот второй параметр как раз нам и нужен, потому что именно он определяет тип линии. Пунктирная линия соответствует ключевому слову dashed. Сплошная – solid.

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

Selector{
	Border-bottom: 1px dashed red;
}

Дело в том, что свойство border задает рамку со всех сторон элемента, поэтому он будет облачен в прямоугольник, но в данном примере нам нужно лишь немного подчеркнуть снизу. Для этого мы и записали border-bottom. Соответственно, также есть свойства border-left, border-right и border-top.

Еще я говорил вам в начале о двойной линии. Она тоже задается свойством border, нужно только прописать другой тип линии, а именно:

Border: 1px double blue;

Здесь ключевым словом является double. У свойства есть и другие значения, а посмотреть вы их можете в любом нормальном справочнике по CSS.

Итак, для подчеркивания пунктиром в css нужных слов используйте свойство свойство border. Первое значение — высота линии, а второе — ее тип, где нужно прописать dashed.

Платное/бесплатное по HTML/HTML5 и CSS/CSS3 на других сайтах

Слегка устаревший, но неплохой бесплатный курс по HTML

Бесплатный курс по современным технологиям HTML5 и CSS3

Платный курс по HTML5 и CSS3, в котором верстается 3 сайта (от простого к сложному)

Платный курс по HTML5 и CSS3 с теорией и примерами сложной верстки

Платные премиум уроки по HTML/CSS и другим технологиям

Добавить комментарий