html -
見出しの後の他のフォントサイズ

Question

これが問題です。<h1> 見出しに 2 つの異なるフォントサイズが必要です。<br> の後のテキストは、前のテキストより大きくする必要があります。

<h1>Welcome text from<br>Name</h1>

だから私はそれを試しました

h1 {
  color: #c3c2c2;
  font-size: 35px;
}

h1 br:after {
  font-size: 50px;
}

しかし、これは機能しません。アイデアや提案はありますか?

score 7 · Accepted Answer

マークアップを変更したくない、または変更できない場合は:first-line、CSS3 のセレクターを使用できます。このようなもの：

 <h1>Welcome text from <br/> Name</h1> 

 h1 { 
   color: #c3c2c2; 
   font-size: 50px; 
 } 

 h1:first-line { 
   font-size: 35px; 
 }

Quirksmode によると、特に構文よりも 1 つのコロンの構文を使用する場合、互換性はまったく問題ありません::first-line(すべての優れたブラウザーがサポートしており、5.5 以降の IE も同様です)。

score 2 · Accepted Answer

これを行う1つの方法は次のとおりです。

HTML:

<h2>Heading<br><span class="name">Name</span></h2>

CSS:

.name {
    font-size:200%;
}

例：

h3ただし、見出しを 1 行に保ち、その下に新しい要素 (たとえば)として小見出しを配置する方が一般的です。

score 2 · Accepted Answer

マークアップを編集できる場合は、「名前」をスパンでラップし、セレクターでスパンをターゲットにします。

score 1 · Accepted Answer

あなたが使用することができます

`<h1>`Welcome text from`<span class="abc">Name</span></h1>

それ以外の

<h1><br>名前からのウェルカムテキスト</h1>

そして.abcにスタイルを与える

score 1 · Accepted Answer

各辺をスパンでラップしてから、そこで異なるサイズを設定してみませんか。これは、br が必要ないことも意味します。

<h1>Welcome text from<span class="size2">Name</span></h1>

h1 {
  color: #c3c2c2;
  font-size: 35px;
}

h1 .size2 {
  font-size: 50px;
}

5 に答える 5