简介
在本实验中,我们将探索 CSS 编程,并学习如何为无文本的链接设置样式。具体来说,我们将使用 :empty
和 :not
伪类,以及 content
属性和 attr()
函数,在 ::before
伪元素中显示链接的 URL。完成本实验后,你将更好地理解如何在网页中操控链接的外观。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将探索 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 中练习更多实验来提升你的技能。