CSS：偽元素+ Twitter引導程序導航欄徽標之前

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%;
}

我想在導航欄中添加圖形徽標作為偽元素（我相信在所有設備上進行維護都比定義img元素以及手動設置樣式更容易）。

不幸的是，整個事情都不起作用，我的意思是:before偽元素不可見。 使用chrome開發工具甚至是不可能的。 圖像在那里，但是我想CSS還有其他問題。

有人可以幫我找出以上內容嗎？

Answer 1

諸如::before類的偽元素需要content屬性才能變得可見（例如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但向后兼容性允許一個為好）