css -::after 似乎没有达到我的预期？

<分区>

我可能误解了 CSS 中的 ::before 和 ::after 特性。

我想要实现的是一个 200x200 像素的框，然后在右上角会有另一个框 (24x24)。这是我得到的:

<div id="foo">bla test</div>

#foo {
    position: relative;
    width: 200px;
    height: 200px;
    background: green;
}
#foo::before {
    position: absolute; top: 0; left: 0;
    background: red;
    width: 24px;
    height: 24px;
}

但是，这不起作用。当我在 Firefox 中检查它时，我没有在 Firebug 的 DOM 检查器 中看到 ::before 部分。

我哪里错了？

谢谢!

最佳答案

你只需要添加content: '';

#foo {
  position: relative;
  width: 200px;
  height: 200px;
  background: green;
}
#foo::before {
  position: absolute; top: 0; left: 0;
  background: red;
  width: 24px;
  height: 24px;
  content: '';
}

<div id="foo">bla test</div>

关于css -::after 似乎没有达到我的预期？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34400956/

上一篇：css - 更改 APEX 5 经典报告中的排序图标

下一篇：twitter-bootstrap - Bootstrap行如何将不同宽度/高度的图像居中？

相关文章：

javascript - 如何在 jQuery 中单击和选择 div 元素

css - 使用 css 和伪元素定位 sibling

javascript - 在 Chrome 中获取伪元素内容

JavaScript:改变 CSS 伪 :before 和 :after 的任何机会或替代方法？

html - 使用 CSS 为某些输入字段设置输入后缀

jquery - Internet Explorer 和 Opera 中的不透明度问题

jQuery fadeIn 效果不工作其适用于 2 div 的 Flicker，但显示/隐藏工作完美需要更改具有淡入淡出效果的 bg 图像

jquery - 动态加载内容时传单弹出窗口未对齐

javascript - 子div向上滑动后如何保持父div的高度不变？

css - 在选择时更改边框颜色