Введение
В этом практическом занятии мы изучим программирование CSS и научимся стилизовать ссылки без текста. В частности, мы будем использовать псевдо-классы :empty и :not, а также свойство content и функцию attr(), чтобы отобразить URL-адрес ссылки в псевдо-элементе ::before. В конце этого практического занятия вы будете лучше понимать, как управлять внешним видом ссылок на ваших веб-страницах.
Стилизация ссылок без текста
В ВМ уже предоставлены index.html и style.css.
Для отображения URL-адреса для ссылок, которые не содержат текст, вы можете использовать псевдо-класс :empty для выбора таких ссылок, псевдо-класс :not для исключения ссылок с текстом и свойство content в сочетании с функцией attr(), чтобы отобразить URL-адрес ссылки в псевдо-элементе ::before. Вот пример фрагмента кода:
<a href="https://30secondsofcode.org"></a>
a[href^="http"]:empty::before {
content: attr(href);
}
Пожалуйста, нажмите на кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Резюме
Поздравляем! Вы завершили практическое занятие "Стилизация ссылок без текста". Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.