CSS标题，而使用行高以移位边框？ [英] CSS heading while using line-height to shift border?

问题描述

我使用以下CSS：

h2 {
    font-weight: normal;
    border-bottom: 1px solid #DDD;
    font-size: 1.6em;
    font-style: italic;
}

h2 span {
    position: absolute;
    top: 7px;
    padding-right: 6px;
    background-color: #F9F9EE;
}

使用时如下：

<h2><span>abc</span></h2>

产生以下效果：

abc ------------------

文本'abc'是标题内容，而虚线是被移位的边界。以下方法运行良好，只要您在页面上使用它一次。我的问题是，我怎么能实现相同的效果，而不使用绝对定位或甚至线高度，因为我怀疑任何一个或两者都是罪魁祸首。

The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.

在几个博客上使用了相同的效果，但是网址滑倒了我的心。

I do remember seeing the same effect being used on a few blogs but the url slips my mind.

谢谢。 ：）

推荐答案

如Rory所说，使用H2标签上的相对位置可以解决问题而不使用图像。 p>

As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.

h2 {
    font-weight: normal;
    border-bottom: 1px solid #DDD;
    font-size: 1.6em;
    font-style: italic;
    position:relative;
}

h2 span {
    position: absolute;
    top: -0.8em;
    padding-right: 6px;
    background-color: #F9F9EE;
}

这适用于我用于测试的三个浏览器Chrome）。

This works in the three browsers I use for testing (IE, Firefox, and Chrome).

这篇关于CSS标题，而使用行高以移位边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！