【问题标题】: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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-04-29
      • 2020-03-17
      • 2017-01-22
      • 1970-01-01
      • 2015-10-20
      • 2015-12-19
      • 2019-12-14
      相关资源
      最近更新 更多