Firefox无法正确显示:before和:after伪元素

托马斯·萨曼尼克

在所有其他浏览器上,除Firefox之外,该网页均正常。甚至是Internet Explorer!伪元素在整个文档中浮动,甚至在第一个伪元素之后也不显示。这种行为有什么解决办法吗?

的CSS

span[property="dc:date dc:created"]::before{
    position: absolute;
    top: 60px;
    content: '';
    display: block;
    background-color: #005691;
    width: 60px;
    height: 20px;
}

span[property="dc:date dc:created"]::after{
    position: absolute;
    top: 60px;
    right: 0;
    width: 0px;
    height: 0px;
    border-top: 20px solid #01416F;
    border-right: 20px solid rgba(0, 0, 0, 0);
    content: '';
}

http://jsfiddle.net/LRnCM/1/

乔什·克罗齐耶(Josh Crozier)

您需要将绝对定位的伪元素定位relative到父元素。此外,inline-block还添加了以包含父元素的宽度。

.submitted {
    position:relative;
    display:inline-block;
}

更新示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Firefox无法正确显示:before和:after伪元素

来自分类Dev

:before &&:after伪元素未显示Firefox

来自分类Dev

CSS:before和:after伪元素在slideToggle();之后不显示 在除Firefox之外的所有浏览器中触发

来自分类Dev

CSS:before和:after伪元素在slideToggle();之后不显示 在除Firefox之外的所有浏览器中触发

来自分类Dev

Firefox不显示:after伪元素

来自分类Dev

伪元素:: before不显示

来自分类Dev

悬停时使用伪元素:before和:after动画徽标

来自分类Dev

如果div没有子元素,则隐藏:before和:after伪元素

来自分类Dev

在:: before或:: after伪元素中选择文本

来自分类Dev

CSS :: before :: after伪元素动态宽度

来自分类Dev

CSS 伪元素 ::before 无法正常工作

来自分类Dev

IE 未将 SVG 显示为伪元素中的内容 :before 或 :after

来自分类Dev

IE不显示:after伪元素

来自分类Dev

CSS伪元素::: before(2); :before和:: before

来自分类Dev

伪元素和<ul>显示:表

来自分类Dev

Firefox动画播放状态未针对伪元素正确更新

来自分类Dev

带有:: before和:: after的文本无法正确居中?

来自分类Dev

在IE11中,使用伪元素:: before和display:table-cell和glyphicons内容不会显示

来自分类Dev

CSS伪选择器:: before和:: after将不会显示在FF 44和IE11中

来自分类Dev

在Firefox中像:after这样的伪元素的位置

来自分类Dev

CSS :: before :: after类的伪元素不起作用

来自分类Dev

:: before / :: after伪类不适用于视频元素

来自分类Dev

如何使:before&:after伪元素填充剩余宽度?

来自分类Dev

CSS :: before :: after类的伪元素不起作用

来自分类Dev

删除 :before :after 伪元素中的意外空间

来自分类Dev

Div元素无法正确显示

来自分类Dev

如果隐藏了溢出,则无法显示:before和:after

来自分类Dev

如何在Internet Explorer 9开发人员工具中定位:: before和:: after伪元素?

来自分类Dev

CSS,使用display:table和before伪元素

Related 相关文章

  1. 1

    Firefox无法正确显示:before和:after伪元素

  2. 2

    :before &&:after伪元素未显示Firefox

  3. 3

    CSS:before和:after伪元素在slideToggle();之后不显示 在除Firefox之外的所有浏览器中触发

  4. 4

    CSS:before和:after伪元素在slideToggle();之后不显示 在除Firefox之外的所有浏览器中触发

  5. 5

    Firefox不显示:after伪元素

  6. 6

    伪元素:: before不显示

  7. 7

    悬停时使用伪元素:before和:after动画徽标

  8. 8

    如果div没有子元素,则隐藏:before和:after伪元素

  9. 9

    在:: before或:: after伪元素中选择文本

  10. 10

    CSS :: before :: after伪元素动态宽度

  11. 11

    CSS 伪元素 ::before 无法正常工作

  12. 12

    IE 未将 SVG 显示为伪元素中的内容 :before 或 :after

  13. 13

    IE不显示:after伪元素

  14. 14

    CSS伪元素::: before(2); :before和:: before

  15. 15

    伪元素和<ul>显示:表

  16. 16

    Firefox动画播放状态未针对伪元素正确更新

  17. 17

    带有:: before和:: after的文本无法正确居中?

  18. 18

    在IE11中,使用伪元素:: before和display:table-cell和glyphicons内容不会显示

  19. 19

    CSS伪选择器:: before和:: after将不会显示在FF 44和IE11中

  20. 20

    在Firefox中像:after这样的伪元素的位置

  21. 21

    CSS :: before :: after类的伪元素不起作用

  22. 22

    :: before / :: after伪类不适用于视频元素

  23. 23

    如何使:before&:after伪元素填充剩余宽度?

  24. 24

    CSS :: before :: after类的伪元素不起作用

  25. 25

    删除 :before :after 伪元素中的意外空间

  26. 26

    Div元素无法正确显示

  27. 27

    如果隐藏了溢出,则无法显示:before和:after

  28. 28

    如何在Internet Explorer 9开发人员工具中定位:: before和:: after伪元素?

  29. 29

    CSS,使用display:table和before伪元素

热门标签

归档