Cómo aplicar CSS a la primera letra después de: antes del contenido?

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

En este caso, el contenido en el pseudo-elemento :before está mostrando en rojo, pero también quiero el estilo del carácter "F" de "F rimero carácter de este párrafo" en azul. Pero en su lugar, veo la "F" de "F ormer -" en azul.Cómo aplicar CSS a la primera letra después de: antes del contenido?

Lo que quiero es aplicar tanto :before y primera letra del .normaldespués el contenido :before al mismo párrafo. es posible? ¿Si es así, cómo?

Fuente

2012-07-29 swati16

Qué parte de su pregunta que lleva a esperar * * cualquier libro o un sitio, nombres como una respuesta? Y que 'F'? ¿El de 'Former' o el de 'First'? –

* pantalla "Primero" de "F" *? Qué significa eso? ¿No quisiste decir "F" de "Primero"? –

posible duplicado de [selector de css: la primera letra del primer párrafo dentro de un div] (http://stackoverflow.com/questions/5721730/selector-deccs-first-paragraphs-first-letter-inside-a-div) –

Lo normal es que hacer esto con el pseudo-elemento :first-letter, pero ya que usted tiene :before contenido, que inserts text before the actual content of your paragraph, a continuación, en lugar de la primera letra del contenido real, :first-letter coincidiría con la primera letra del contenido :before lugar.

Esto significa que en lugar de esto:

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

que en realidad obtener esto:

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

Debido a la forma en CSS genera obras de contenido, no creo que haya una solución en CSS puro para llegue a la primera letra del contenido real una vez que haya insertado el contenido antes.

Como alternativa, se puede utilizar un span en lugar del pseudo-elemento :first-letter, al que luego se puede aplicar el color azul, pero eso significa que tiene que insertar elementos adicionales:

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

Fuente

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>

Gracias por guía-tengo mi SALIDA a mi modo de imaginar y lo quiero

Fuente

2012-07-29 18:46:41 swati16

Cómo aplicar CSS a la primera letra después de: antes del contenido?

Respuesta

Cuestiones relacionadas