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。