CSS: la primera letra no funciona

Vivian, miembro de este equipo, nos hizo el favor de redactar esta sección ya que conoce muy bien el tema.

Solución:

::first-letter no funciona en en línea elementos como un span. ::first-letter trabaja en cuadra elementos como un párrafo, título de tabla, celda de tabla, elemento de lista, o aquellos con sus display propiedad establecida en inline-block.

Por lo tanto, es mejor aplicar ::first-letter a un p en lugar de un span.

p::first-letter font-size: 500px;

o si quieres un ::first-letter seleccionador en un span entonces escríbelo así:

p b span::first-letter font-size: 500px !important;
span display:block

MDN proporciona la justificación de este comportamiento no obvio:

los ::first-letter El pseudoelemento CSS selecciona la primera letra de la primera línea de un bloque, si no está precedido por ningún otro contenido (como imágenes o tablas en línea) en su línea.

…

Una primera línea sólo tiene significado en una caja contenedora de bloques, por lo tanto, la ::first-letter pseudo-elemento sólo tiene un efecto sobre los elementos con un display valor de block, inline-block, table-cell, list-item o table-caption. En todos los otros casos, ::first-letter no tiene efecto.

Otro caso extraño(aparte de no trabajar en elementos en línea) es si usa :before los :first-letter se aplicará al antes, no a la primera letra real, consulte codepen

Ejemplos

• http://jsfiddle.net/sandeep/KvGr2/9/
• http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/

Referencias

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter

Puede obtener el comportamiento deseado configurando la propiedad de visualización del intervalo en bloque en línea:

.heading span 
  display: inline-block;


.heading span:first-letter 
  color: red;

  An
  Interesting
  Heading

Esto es porque :first-letter solo opera en elementos de bloque / bloque en línea. SPAN es un elemento en línea.

Tomado de http://reference.sitepoint.com/css/pseudoelement-firstletter:

El pseudoelemento :first-letter se usa principalmente para crear efectos tipográficos comunes como capitulares. Este pseudoelemento representa el primer carácter de la primera línea de texto con formato en un elemento de nivel de bloque, un bloque en línea, un título de tabla, una celda de tabla o un elemento de lista.

Calificaciones y comentarios

Si piensas que ha sido útil este artículo, sería de mucha ayuda si lo compartieras con el resto desarrolladores de este modo contrubuyes a difundir esta información.

---

---

Utiliza Nuestro Buscador