使用：在创建包含链接的图标之前

Question

如何使用content与:before创建一个也可用作页面链接的图标？

例如，我目前有：

.basketBtn a:before 
    { 
    content:url('/images/mobile/basketIcon.png'); 
    position:absolute; 
    left:9px; 
    top:9px; 
    } 

现在需要使图像basketIcon点击，但这个不起作用：

.basketBtn a:before { 
    content:<a href="/pages/basket/basket.aspx">url('/images/mobile/basketIcon.png')</a>; 
    position:absolute; 
    left:9px; 
    top:9px; 
} 

Answer 1

正如spec定义，内容只生成文本内容并且不处理HTML。这是有道理的，因为你不希望CSS生成HTML，你会吗？

生成的内容不会更改文档树。特别是，它不被反馈给文档语言处理器（例如，用于重新分析）。

使用CSS它是什么，呈现制造。

但是，在您的具体情况下，我没有看到太多的问题，因为::before伪元素创建的元素是父元素的第一个子元素。这意味着，如果您将正确的href分配给您的父锚，那么您的::before元素也应该完全可点击，无论它是否是绝对定位的。

Working demo