通过CSS显示图像而不是网址

Question

我有：

<a href="/media/media/about-logo.png">media/about-logo.png</a>

我能做到：

a { content: url(/media/media/about-logo.png); }

我需要：

a { content: url( attr(href) ); }

哪个不起作用。

我需要css在href中使用文本并将其用作网址，而不对其进行硬编码。

Answer 1

使用纯CSS和HTML无法实现这一目标。您需要使用JavaScript。为简单起见，我在这里使用jQuery。

$("a").each(function () {
   $(this).css('content', 'url('+$(this).attr('href')+')');
});

此时，您可以使用具有相同结果的.text。

$("a").each(function () {
   $(this).text($(this).attr('href'));
});