html - テキストを囲むダッシュ

Question

上記の動的に生成されたテキスト（つまり、画像だけを使用することはできません）を前提として、htmlおよびcssセレクターのみを使用してデザインを再作成しようとしています。

h4テキストを含むシングルを使用したいのですが、他の解決策を受け入れることができます。私は絶対測位を使用したくないのですが、それが唯一の方法である場合は、そうしてください。

タグで囲んでみましspanたが、固有の幅を持たないインライン要素です。

は、h4内にネストされますがdiv、常に同じクラスまたはIDであるとは限りません。

私を始めるためのアイデアやリソースはありますか？

Answer 1

このフォームで私に連絡してくださいの下のテキストを彼らがどのように行うかをチェックしてください。かなり清潔でシンプル。http://www.onextrapixel.com/examples/html5-css3-contact-form/

これを行う実際のCSSは次のとおりです。

h1 {
font-family: 'Questrial', Verdana, sans-serif;
text-align:center;
font-size:40px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}

/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content: '&';
text-align:center;
display:block;
width:100%;
font-family: 'Alice', Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}

/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
content: ' ';
text-align:center;
display:block;
height:2px;
width:100%;
background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7)     42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0)  57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */
}

さらに編集して申し訳ありませんが、ここに説明があります。h1 {...}は実際のテキストのスタイルを設定するため、「イベントスケジュール」が表示され、h1：before{...}はクールな線の効果を発揮します。h1：after {...}はアンパサンドを実行するので、これは実際にテキストを配置する場所です。

Answer 2

あなたができることは、あなたのテキストをで包み、spanそれをコンテナの中に入れることdivです。

<div id='container'>
    <span id='text'>EVENT SCHEDULE</span>
</div>​

次に、コンテナborder-bottomとテキストよりも低い高さを指定します（半分のサイズで、探している効果が得られます）。

#container {border-bottom:solid 1px #333; text-align:center; height:10px;}
#text { background:#fff; padding:0 20px; }​

ここでライブの例を見ることができます：http：//jsfiddle.net/vzjxA/13/