为无文本的链接设置样式

简介

在本实验中，我们将探索 CSS 编程，并学习如何为无文本的链接设置样式。具体来说，我们将使用 :empty 和 :not 伪类，以及 content 属性和 attr() 函数，在 ::before 伪元素中显示链接的 URL。完成本实验后，你将更好地理解如何在网页中操控链接的外观。

为无文本的链接设置样式

虚拟机中已提供了 index.html 和 style.css。

要为无文本的链接显示链接 URL，你可以使用 :empty 伪类来选择此类链接，使用 :not 伪类来排除有文本的链接，并结合使用 content 属性和 attr() 函数在 ::before 伪元素中显示链接 URL。以下是一个代码片段示例：

<a href="https://30secondsofcode.org"></a>

a[href^="http"]:empty::before {
  content: attr(href);
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已完成“为无文本的链接设置样式”实验。你可以在 LabEx 中练习更多实验来提升你的技能。