pseudo-class - 使用 :before 创建包含链接的图标

Question

如何使用contentwith: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

按照规范的定义，内容只生成文本内容，不处理 HTML。这是有道理的，因为您不希望 CSS 生成 HTML，对吗？

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

将 CSS 用于它的用途，presentation。

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

Working demo