4

意味的にヘッダー (h3、h4 など) である要素を含むデザインを実装しています。全幅のブロック要素であり、その後にヘッダーの全幅を拡張する垂直中央の水平線が続きます。

ヘッダー

各ヘッダーを でラップし、<div>その後に別のブロックレベルの要素を挿入することでこれを処理できることはわかっていますが、そのように HTML を汚染したくないです。私の最初の傾向は、次::afterのようにヘッダーで要素を使用することでした:

.line-header::after {
    content:'\00a0';
    display: inline-block;
    float: right;
    width: 55%;
    margin-top: -12px;
    border-bottom: 1px solid gray;
}

ただし、これには::after要素を固定幅にする必要があり、これは明らかに異なる幅のヘッダーでは機能しません: http://jsfiddle.net/nbSTf/

HTMLに余分な要素を挿入せずに、ヘッダーの右側のスペースを埋める可変幅の行を取得する方法についてのアイデアはありますか?

編集:以下の Tyriar の回答 (ヘッダーの後ろに全幅の線を描画し、背景色を設定してテキストの後ろの線を消去することを提案) は、これが繰り返しの背景画像の前で行われていることを思い出させました-したがって、背景のトリックはありません残念ながら可能です。

4

3 に答える 3

3

これはあなたがそれを行うことができる方法です、残念ながらそれは属性に依存しています（必ずしも ではありませんtitle）、これは JavaScript を使用してプログラムで簡単に設定できます。

:beforeおよび:after疑似要素を使用:afterし、全幅の線を描画するために:before使用され、テキストのサイズのテキストの背後にある白い背景を描画するために使用されます。疑似要素z-indexは、正しい順序でレイヤー化するために正しく設定する必要があります。

jsフィドル

例のスクリーンショット

HTML

<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3>
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>

CSS

.line-header {
    margin-top: 15px;
    position:relative;
}
.line-header:before {
    position: absolute;
    display:block;
    top:0;
    left:0;
    bottom:0;
    content: attr(title);
    background-color:#FFF;
    color:#FFF;
    z-index:-1;
    padding-right:.5em;
}
.line-header::after {
    position:absolute;
    content:'';
    display: block;
    left:0;
    right:0;
    top:50%;
    background-color:#555;
    height:1px;
    z-index:-2;
}
于 2013-03-15T01:48:56.273 に答える
0

CSSでこれを試してください：

編集：

body { background: red; overflow-x: hidden }

.line-header {
    margin-top: 15px;
    margin-right: 5px;
    display: inline;
    z-index: 100;
    float: left;
    clear: left;
}

.line-header::after {
    position:absolute;
    content:'\00a0';
    width: 100%;
    margin-top: -12px;
    margin-left: 5px;
    border-bottom: 1px solid gray;
    z-index: 0;
}

これはChromeでのみテストしました。これがフィドルです。

于 2013-03-15T01:58:29.937 に答える
0

では、逆にするとどうなるでしょうか。(任意の方法で) 線を描画し:after、ヘッダーを挿入するために使用します。追加の HTML はありませんが、追加の CSS がいくつかあります。

HTML

<div id="header1"></div>
<div id="header2"></div>

線を引くには、単にborder-top-style:solid;. ヘッダーを書き込むには、:after.

CSS

div
{
    position:relative;
    border-top-style:solid;
    margin-top:20px; /* just for spacing */
}
div:after
{
    display:block;
    background-color: #FFFFFF;
    position:absolute;
    top:-10px;
    left:0px;
}
#header1:after
{
    content:"Hello;"
}
#header2:after
{
    content:"Hello Again";
}

このようなものが得られます。

さらにカスタマイズするには、フォントを拡大したり、色を変更したり、パディングを追加したり (空白を増やすため)、top自分に合った方法を変更したりできます。

于 2013-03-15T02:32:39.863 に答える