css :before 伪元素 + twitter bootstrap 导航栏标志

Question

我正在使用 Twitter Bootstrap。这是我的 header 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%;
}

我想在导航栏中添加一个图形徽标作为伪元素（我相信它更容易在所有设备上维护，而不是定义 img 元素并手动设置它们的样式）。

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

还有其他问题

有人可以帮我看看我应该在上面更改什么吗？

Answer 1

像 ::before need a content property 这样的伪元素是为了变得可见（例如 content:'';）。这会呈现一个 0×0px 的框，您仍然必须在其上设置 width 和 height。也许您还想包括 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 中的一个 : 但向后兼容性也允许一个冒号。）

css :before 伪元素 + twitter bootstrap 导航栏标志

css :before pseudo element + twitter bootstrap navbar logo

html

css

twitter-bootstrap

pseudo-element