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

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

1 个答案: