html - CSS :before pseudo element + twitter bootstrap navbar logo

Question

我正在使用 Twitter Bootstrap。这是我的标题 HTML 的一部分:

<a class="navbar-brand" href="#/">
    <span>watch.js</span>
</a>

我还添加了以下 CSS:

.navbar-brand span:before {
  background: url("favicon.png")no-repeat;
  background-size: 53%;
}

我想在导航栏中添加一个图形 Logo 作为伪元素(我相信在所有设备上维护它比定义 img 元素并手动设置样式更容易)。

不幸的是，整个事情不起作用，我的意思是， :before 伪元素不可见。甚至使用chrome开发工具都无法找到。图像就在那里，但我猜 CSS 还存在其他问题。

有人可以帮我找出上面应该改变什么吗？

Answer 1

伪元素如 ::before need a content property为了变得可见(例如 content:'';)。这会渲染一个 0×0px 的盒子，您仍然需要在其上设置宽度和高度。也许您还想包含 display (例如 display:inline-block;)。

您的代码至少需要成为

.navbar-brand span::before {
  content:'';
  width: 16px;
  height: 16px;
  dislay: inline-block;
  background: url("favicon.png")no-repeat;
  background-size: 53%;
}

(请注意，伪元素有两个冒号 ::，而不是 CSS3 中的一个 :，但向后兼容性也允许使用一个冒号。)