如何使用css显示a链接的url？

CSS本身无法直接显示一个<a>链接的href URL 属性值。你需要使用JavaScript来实现这个功能。以下提供几种方法：

1. 使用JavaScript和textContent或innerText：

这是最简单的方法，适用于只想显示URL，并且不需要保留链接功能的情况。

<a href="https://www.example.com" class="show-url">Example Link</a>

<script>
  const links = document.querySelectorAll('.show-url');
  links.forEach(link => {
    link.textContent = link.href; // 或 link.innerText = link.href;
  });
</script>

这种方法会替换链接文本为URL，链接将不再有效。

2. 使用JavaScript创建新的元素：

这种方法允许你保留原始链接，并在其旁边或下方显示URL。

<a href="https://www.example.com" class="show-url">Example Link</a>

<script>
  const links = document.querySelectorAll('.show-url');
  links.forEach(link => {
    const urlSpan = document.createElement('span');
    urlSpan.textContent = link.href;
    link.parentNode.insertBefore(urlSpan, link.nextSibling); // 在链接后插入
    // 或者 link.parentNode.appendChild(urlSpan); // 在父元素末尾插入
  });
</script>

你可以使用CSS来控制URL的样式和位置，例如：

.show-url + span {
  margin-left: 10px;  /* 添加左边距 */
  color: gray;       /* 设置颜色 */
  font-size: smaller; /* 设置字体大小 */
  display: block;     /*  将URL显示在新的一行 */
}

3. 使用JavaScript和title属性:

这种方法将URL添加到链接的title属性中，当鼠标悬停在链接上时，浏览器会显示URL作为工具提示。

<a href="https://www.example.com" class="show-url">Example Link</a>

<script>
  const links = document.querySelectorAll('.show-url');
  links.forEach(link => {
    link.title = link.href;
  });
</script>

这种方法不需要添加额外的元素，但用户需要悬停才能看到URL。

4. 使用CSS的::after伪元素和attr()函数 (部分浏览器支持，不推荐):

某些浏览器支持使用attr()函数在::after伪元素中显示属性值。然而，这种方法的兼容性较差，不推荐使用。

<a href="https://www.example.com" class="show-url">Example Link</a>

<style>
.show-url::after {
  content: " (" attr(href) ")"; /*  在链接文本后添加URL */
  margin-left: 5px;
  color: gray;
}
</style>

总结:

推荐使用JavaScript创建新元素的方法，因为它提供了最大的灵活性和控制力，并且兼容性最好。 选择哪种方法取决于你的具体需求和设计。 记住，纯CSS无法直接显示链接的URL。