css - 使用 :before 伪属性的 CSS 间距

Question

我有一张我正在尝试使用 :before 放置的图像。我希望图像位于该行的第一个字母上。如果你看现场，鸟的脚应该碰到字母“C”。它适用于小提琴，但不适用于现场。有什么帮助吗？

http://imip.rvadv.com/index3.html

小提琴：http: //jsfiddle.net/imakeitpretty/yV3kK/30/

Answer 1

#chirp:before{
margin-bottom:-20px;
}

目前，margin-bottom 设置为 -10px；

希望能帮助到你！

Answer 2

您在 jsfiddle 和您的测试站点上使用不同的基础 css。

例如，字体系列已经不同，因此您无法真正比​​较两者。

无论如何，设置margin-bottom为-20pxin#chirp:before可以解决您的问题。

Answer 3

考虑添加

.st-accordion ul li > a{
   line-height:27px;
   ...
}

并更新以下内容：

#chirp:before {
    ...
    margin-bottom:0;
    ...
}

Answer 4

您可以尝试将 :before 元素定位为绝对：

http://jsfiddle.net/yV3kK/31/

#chirp:before {
    content:url(http://imip.rvadv.com/images/chirp-bird.png);
    padding:0;
    display:block;
    width: 77px;
    height: 50px;
    position: absolute;
    top: -44px; 
    left: -35px;
}

#chirp{
    position:relative;    
}

Answer 5

对我来说似乎是个line-height问题。尝试将其设置为36px（与您的字体大小相同）。我不确定为什么会这样，但我怀疑文本的行高在您的网站和 JSFiddle 上是不同的。