Первыми тегами для зачёркнутого текста были <strike>
и <s>
.
C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели <del>
, он помечает текст как удаленный, что семантически правильнее.
По виду они не отличается:
Изменить цвет линии
Первый способ
С помощью CSS свойства text-decoration-color
, который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).
Также можно изменить стиль линии с помощью text-decoration-style
.
Значение | Описание | Пример |
---|---|---|
text-decoration-style: solid; |
Одинарная линия | |
text-decoration-style: double; |
Двойная линия | |
text-decoration-style: dotted; |
Точечная линия | |
text-decoration-style: dashed; |
Пунктирная линия | |
text-decoration-style: wavy; |
Волнистая линия |
Второй способ
Тегу <del>
задается цвет линии, вложенному <span>
цвет текста.
Третий способ
Линия добавляется псевдо элементом :before
, но у текста не должно быть переносов.
del {
position: relative;
color: #000;
text-decoration: none;
}
del:before {
content: "";
border-bottom: 2px solid red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
При такой реализации, можно расположить линию за текстом.
del {
position: relative;
color: #000;
text-decoration: none;
}
del:before {
content: "";
border-bottom: 2px solid red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
z-index: -1;
}