为无文本的链接设置样式

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35190{{"`为无文本的链接设置样式`"}} css/pseudo_classes -.-> lab-35190{{"`为无文本的链接设置样式`"}} css/pseudo_elements -.-> lab-35190{{"`为无文本的链接设置样式`"}} end

为无文本的链接设置样式

虚拟机中已提供了 index.htmlstyle.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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程