css:之前的伪元素+ 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%;
}

我想在导航栏中添加一个图形徽标作为伪元素(我相信它更容易在所有设备上维护,而不是定义img元素以及手动设置它们).

不幸的是,整个事情都行不通,我的意思是,:before伪元素是不可见的.使用chrome dev工具找到它甚至是不可能的.图像就在那里,但我猜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中有两个冒号::而不是一个冒号,:但向后兼容也允许一个冒号.)