Come applicare i CSS alla prima lettera dopo: prima del contenuto?

<!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>

Qui, il contenuto del pseudo-elemento :before sta visualizzando in rosso, ma voglio anche per lo stile del carattere "F" di "F irst carattere di questo paragrafo" in blu. Invece, vedo la "F" di "F ormer -" in blu.Come applicare i CSS alla prima lettera dopo: prima del contenuto?

Quello che voglio è quello di applicare sia la lettera :before e prima di .normaldopo il contenuto :before allo stesso paragrafo. È possibile? Se é cosi, come?

fonte

2012-07-29 swati16

Quale parte della tua domanda ti porta ad aspettarsi * * qualsiasi libro, o un sito, nomi come una risposta? E quale 'F'? Quello in 'Former' o quello in' First'? –

* visualizzare "Primo" di "F" *? Cosa significa? Non intendevi "F" di "First"? –

possibile duplicato di [selettore css: prima lettera del primo paragrafo all'interno di un div] (http://stackoverflow.com/questions/5721730/css-selector-first-paragraphs-first-letter-inside-a-div) –

Normalmente si sarebbe farlo con lo pseudo-elemento :first-letter, ma visto che avete :before contenuti, che inserts text before the actual content of your paragraph, quindi piuttosto che la prima lettera del contenuto effettivo, :first-letter sarebbe partita la prima lettera del contenuto :before invece.

Ciò significa che invece di questo:

<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>

è effettivamente ottenere questo:

<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>

causa come CSS generato opere di contenuto, non credo che ci sia una soluzione in puro CSS per raggiungere la prima lettera del contenuto effettivo una volta inserito il contenuto prima di esso.

In alternativa, è possibile utilizzare una span al posto della pseudo-elemento :first-letter, a cui è possibile applicare il colore blu, ma che significa che devi inserire elementi aggiuntivi:

<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; 
}

fonte

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>

Grazie per la linea guida-ho ottenuto il mio USCITA Il mio modo di immaginare e lo voglio

fonte

2012-07-29 18:46:41 swati16

Come applicare i CSS alla prima lettera dopo: prima del contenuto?

risposta

Problemi correlati