CSSを最初の文字の後に適用する方法：コンテンツの前に？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<style type="text/css"> 
p:before { 
    content:"Former - "; 
    color:red; 
    font-family:"Tahoma" ,Times New Roman; 
    font-size:70%; 
} 

p.normal:first-letter { 
    font-size:40px; 
    color:blue; 
} 
</style> 
</head> 
<body> 
    <p class="normal">First character of this paragraph will 
    be normal and will have font size 40px;</p> 
</body> 
</html>

ここで、:before擬似要素の内容は赤で表示されますが、私はまた、ブルーの「この段落の文字IRST F」の文字「F」のスタイルにしたいです。代わりに、 "F ormer - "の "F"が青色で表示されています。私が欲しいものCSSを最初の文字の後に適用する方法：コンテンツの前に？

は同じ段落に:beforeと後.normalの最初の文字:beforeコンテンツの両方を適用することです。これは可能ですか？もしそうなら、どうですか？

出典

2012-07-29 swati16

あなたの質問のどの部分が*任意の*ブック、またはサイト、答えとして名を期待するあなたをリードしたいですか？そして「F」は？「前者」のものか「最初」のものか？ –

* "F" *の "First"を表示しますか？どういう意味ですか？ "First"の "F"を意味しませんでしたか？ –

[CSSセレクタの可能な重複：div内の最初の段落の最初の文字]（http：//stackoverflow.com/questions/5721730/css-selector-first-paragraphs-first-letter-inside-a-div） –

通常は:first-letter擬似要素でこれを行うが、あなたは、その後、むしろ実際のコンテンツの最初の文字よりも、:first-letterではなく:beforeコンテンツの最初の文字と一致しますinserts text before the actual content of your paragraph、:beforeコンテンツを、持っているように見えます。

<p class="normal"> 
    <p:before>Former - </p:before> 
    <p.normal:first-letter>F</p.normal:first-letter>irst character of this paragraph will 
    be normal and will have font size 40px; 
</p>

は、あなたが実際にこれを取得：これに代えていることを意味

<p class="normal"> 
    <p:before> 
    <p.normal:first-letter>F</p.normal:first-letter>ormer - 
    </p:before> 
    First character of this paragraph will 
    be normal and will have font size 40px; 
</p>

に起因して、CSSがコンテンツ作品を生成する方法、私は純粋なCSSのソリューションはないと思いますその前にコンテンツを挿入したら、実際のコンテンツの最初の文字に到達します。代替案として

、あなたは、:first-letter擬似要素の代わりにspanを使用することができたあなたは、青色を適用することができますし、それはあなたが余分な要素を挿入しなければならないことを意味：

<p class="normal"><span>F</span>irst character of this paragraph will 
    be normal and will have font size 40px;</p>

p.normal span { 
    font-size:40px; 
    color:blue; 
}

用

出典

2012-07-29 15:27:54 BoltClock

-1

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

    <title>Complicated pseudo element and span</title> 

    <style type="text/css"> 
     <!-- 
     p:before { 
      content:"Read this -"; 
      color:red; 
      font-family:"Tahoma" ,Times New Roman; 
      font-size:100%;} 

      .span { 
        font-size:40px; 
       color:blue; 
       } 

     --> 
    </style> 

    </head> 
    <body> 

    <p><span style="color:blue; font-size:30px" >F</span>irst character of this paragraph 
     will be normal and will have font size 40px;</p> 

    </body> 
</html>

おかげガイドライン - 私は私のOUTPUT私は想像する方法を持って、私はそれが

出典

2012-07-29 18:46:41 swati16

CSSを最初の文字の後に適用する方法：コンテンツの前に？

答えて

関連する問題