Текст, закреслений лінією іншого кольору

Проект фактично являє собою онлайн сховище вільно поширюваного програмного коду. Свої розробки тут можуть розміщувати всі охочі, а доступ до проектів можна отримати всім користувачам з будь-якої точки світу.

А ви вже додали новина в додаток? Якщо немає то обов'язково зробіть це!

Кілька варіантів реалізації на CSS простенького ефекту виділення тексту - закреслення його лінією іншого кольору. Колись переді мною постала така задача, я з нею успішно впорався. Потім вирішив поекспериментувати і добитися цього ж ефекту, але іншими способами. Ось що у мене вийшло. Загальна суть всіх прикладів в тому, що створюється контейнер з перекреслює лінією одного кольору, а в ньому міститься текст іншого кольору.

Перший варіант, яким і була вирішена задача, - використання HTML-тега або . Обидва цих тега підтримуються всіма браузерами, але з HTML 4.01 strike вважається застарілим, а в HTML5 взагалі скасований. Проте, такий варіант має місце бути.

Якщо почитати документацію по HTML, то там написано, що замість цих тегів рекомендується використовувати тег . Крім візуального ефекту, він є ще й семантично більш правильним, якщо потрібно виділити текст, який втратив актуальність.
Опис стилів залишається таким же, як і в першому прикладі, змінюється тільки тег контейнера.

Наступний приклад заснований на властивості CSS text-decoration, а точніше на його значенні line-through. У цьому випадку вміст контейнера буде перекреслено горизонтальною лінією. Нам залишається тільки задати в стилях колір закреслює лінії і колір тексту вмісту контейнера.

Заключний приклад показаний тільки як ще один варіант вирішення завдання, на практиці його краще не використовувати, тим більше, що він не працює в браузері Internet Explorer. Цей спосіб заснований на тому, що контейнеру та вмісту присвоюється атрибут position: relative, а потім контейнер з перекреслює лінією і закреслювати текст зсуваються відносно один одного по вертикалі. Перекреслює лінією в даному випадку є нижня межа контейнера, а колір тексту і контейнера не змінюється.

Єдиний плюс такого способу в тому, що можна задати не тільки безперервний тип лінії закреслення, але і будь-який інший, підтримуваний властивістю border. Також можна вибрати і товщину лінії закреслення. Повторюся, ніколи так не робіть без крайньої потреби!

Як бачите, використання CSS і HTML дає вам дуже широкі можливості для вирішення завдань по верстці та оформлення сайтів. Вам залишається тільки вибрати один з варіантів, який підходить під конкретні вимоги макета.