Иногда некоторые слова на веб-страничке требуется оформить так, что в 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.