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

【问题标题】：Using :before to create icon including link使用 :before 创建包含链接的图标
【发布时间】：2013-04-08 20:04:44
【问题描述】：

如何将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;
}

【问题讨论】：

标签： pseudo-class

【解决方案1】：

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

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

将 CSS 用于它的用途，演示文稿。

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

Working demo

【讨论】：