【问题标题】:Div with CSS content, after pseudo element is not visible带有CSS内容的div,伪元素后不可见
【发布时间】:2017-07-27 08:44:40
【问题描述】:

我有一个必须完成的 POC,我只能使用 CSS 来更新产品的样式。我已使用 CSS 内容属性将其中一张产品图片替换为徽标。

我必须在此徽标之后添加一个带有电话号码的简单字符串。我试图使用:after 伪元素来做到这一点。这仅适用于 div 的内容为空(徽标已删除)时。

.demo {
  content: url('http://placehold.it/350x150')
}

.demo:after {
  content: 'test';
  display: inline-block;
}
<div class="demo"></div>

我已尝试将display 更改为inline-block 并为这两个规则硬编码heightwidth。基本上我能找到的一切。任何帮助将不胜感激。

这里的JSFiddle:https://jsfiddle.net/qykbjznm/

【问题讨论】:

标签: css pseudo-element css-content


【解决方案1】:

一些浏览器将content 属性应用于实际元素,尽管它是not being supported in CSS2。 css-content-3 有望实现这一点,但在 3 级规范成为标准之前,这实际上在未来几年内不会发生(特别是考虑到它在过去的14年),将content 应用于实际元素应被视为非标准行为。

content 属性的值为图像时,that image is inserted as replaced content。并且当它应用于实际元素时,这会阻止该元素具有 ::before::after 伪元素。这就是你的::after 伪元素没有出现的原因。

如前所述,您所要做的就是将图像应用到元素的 ::before 伪元素,而不是元素本身。

【讨论】:

    【解决方案2】:

    我稍微弄乱了你的 JSFiddle,我发现让电话号码显示在当前 div 下方的唯一真正方法是创建另一个 div:

    <div class="demo"></div>
    <div class="demo2"></div>
    <style>
      .demo {
        content: url('http://placehold.it/350x150');
        height:150px;
        width:350px;
      }
    
      .demo2:before {
        content: "test";
      }
    </style>
    

    【讨论】:

      【解决方案3】:

      content 属性替换元素中的所有内容。通过将content 添加到非伪选择器,该内容将替换::before::after 伪选择器。

      因此,请尝试仅在 ::before::after 伪选择器中使用 content 属性。

      .demo:before {
           content: url('http://placehold.it/350x150')
      }
      
      .demo:after {
          content: 'some text';
          display: block;
      }
      &lt;div class="demo"&gt;&lt;/div&gt;

      【讨论】:

      • 只是补充说明一下,content 仅适用于伪元素,即 :before:after,因此将 content 用于 .demo 将失败。
      • @Mr.Alien 如果您查看 OP 提供的 JSfiddle,content 应用于非伪选择器并呈现为 content 将在 ::before/::after 内呈现是他遇到问题的根本原因。
      • @Mr. Alien:更正,它仅在 ::before 和 ::after 上支持。一些浏览器确实将内容应用于实际元素,但这被认为是非标准行为。
      • @BoltClock 我的错,我的意思是你需要有content 用于伪元素,没有它们,它不会渲染。有点仅供参考。不过谢谢...@Jamy 也感谢您的澄清。
      【解决方案4】:

      您可以从 CSS 中替换背景并将其作为图像放入 HTML:

      .demo::after {
          content: 'test';
          display: inline-block;
      }
      <div class="demo">
        <img src='http://placehold.it/350x150'/>
      </div>

      甚至可以这样做:

      .demo {
           background: url('http://placehold.it/350x150');
           height:150px;
           width:350px;
      }
      
      .demo::after {
          content: 'test';
      }
      &lt;div class="demo"&gt;&lt;/div&gt;

      有两种不同的结果。

      【讨论】:

        猜你喜欢
        • 2012-01-08
        • 1970-01-01
        • 2012-12-17
        • 2015-06-24
        • 1970-01-01
        • 1970-01-01
        • 2014-10-27
        • 2014-05-27
        相关资源
        最近更新 更多