Style Links with No Text

Introduction

In this lab, we will explore CSS programming and learn how to style links with no text. Specifically, we will use the :empty and :not pseudo-classes, as well as the content property and attr() function, to display the link URL in the ::before pseudo-element. By the end of this lab, you will have a better understanding of how to manipulate the appearance of links in your web pages.

Skills Graph

Style Links With No Text

index.html and style.css have already been provided in the VM.

To display the link URL for links that have no text, you can use the :empty pseudo-class to select such links, the :not pseudo-class to exclude links with text, and the content property in combination with the attr() function to display the link URL in the ::before pseudo-element. Here's an example code snippet:

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

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

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Style Links With No Text lab. You can practice more labs in LabEx to improve your skills.