6

二重枠 (下線付き) のヘッダーを取得しようとしていました。1 つ目は全幅、2 つ目はテキスト幅のみです。境界線はオーバーラップする必要があります そのようにネストされた2つの要素を持つ簡単な解決策があります:

<h1><span>Title</span></h1>

そしてCSS：

h1 {
    border-bottom: 1px solid red;
}

h1 span {
    display: inline-block;
    padding: 0 0 10px;
    margin-bottom: -1px;
    border-bottom: 1px solid blue;
}

Span にはinline-block表示プロパティがあるため、適切な幅があります。

:after、:beforeセレクター、およびh1要素のみで同じ効果を得ることができるかどうか疑問に思っています。

4

2 に答える 2

3

それはできます。私はvwユニットを使用しました。

このWorking Fiddleを見てください

HTML:

<h1 class="SpecialBorder">Title</h1>

CSS:

*
{
    margin: 0;
    padding: 0;
}
.SpecialBorder
{
    display: inline-block;
    position: relative;
}
.SpecialBorder:before , .SpecialBorder:after
{
    content:'';
    position: absolute;
    left: 0;
    bottom: 0;
}
.SpecialBorder:before
{
    width: 100vw;
    border-bottom: 1px solid red;
}
.SpecialBorder:after
{
    width: 100%;
    border-bottom: 1px solid blue;
}

説明:before &疑似要素は 、after境界線を描画する要素です。どちらも空の要素です。境界線が見えるようにする特定の幅があります。

それらは<h1>親の一番下に絶対に位置しています。

before: 赤い境界線を担当します。そのため、彼の幅はビューポートの「100%」に設定されています。 after: 赤い境界線を担当します。したがって、彼の幅は100%彼の親 ( <h1>) にh1設定されているため、 は「display:inline-block;」に設定されています (したがって、彼のコンテンツと同じようにのみにまたがります)

vwunit は新しいブラウザのみでサポートされています。

vw単位を使用できない場合でも、それに慣れ親しんだものを作成できることに注意してください。display:inline-block;fromを削除してh1(再び全体に広がるようにする) to の幅を変更beforeし100%(全体にまたがるようにする)、 with をafter任意の固定値に変更します。

編集：thgaskellがコメントで述べたように、

vwウィンドウのサイズが変更されたときに、Webkit ブラウザーで単位が適切に更新されないというバグがあります。

編集 2: タイトルの後に表示する要素を作成するには、<br />タグを使用するか、ここに示されているようなクリア テクニックを使用できます。

于 2013-09-23T08:21:05.590 に答える
0

それがあなたが望むものかどうかはわかりませんが、次のルールを実行できます。

h1 {
    ...
}

/* here are the direct children of every h1 */
h1>* {
    ...
}

::afterセレクターは、新しいコンテンツを挿入する::beforeときに意味があります (二重コロンに注意してください)。セレクターの MDNといくつかの例を次に示します。::after

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

于 2013-09-22T23:56:58.743 に答える