Primera letra, primera línea
La primera letra: el pseudo-elemento ::first-letter
El pseudo-elemento ::first-letter permite dar formato a la primera letra de un elemento, sin tener que ponerlo dentro de otro elemento ( un elemento <span> por ejemplo ).
.capitular{
display:block;
width:20em;
margin:1em auto;
}
.capitular::first-letter{
color:red;
font-weight:bold;
}
Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.
Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.
El pseudo-elemento ::first-letter y el pseudo-elemento ::before
¡OJO! Si el dicho elemento tiene un pseudo-elemento ::before cuyo contenido es texto, el CSS considera la primera letra de este texto como pseudo-elemento ::first-letter.
._before::before{
content: 'Before: '
}Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.
Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.
Crear un efecto de letra capitular
Para crear un efecto de letra capitular necesitamos flotar el pseudo-elemento ::first-letter a la izquierda:
.letra.capitular::first-letter{
color:red;
font-size:400%;
display:block;
float:left;
padding:0 .1em 0 0;
margin:-.4em 0 -.6em 0;
}Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.
Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.
La primera línea: el pseudo-elemento ::first-line
En el CSS existe otro pseudo-elemento parecido que nos permite dar formato a la primera línea de texto: el pseudo-elemento ::first-line:
.primera-linea::first-line{
font-variant: small-caps;
letter-spacing: .07em;
}Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.
Arthur Eric Rowton Gill conocido como Eric Gill fue un tipógrafo y escultor inglés, conocido por su aportación en el campo de la tipografía, donde creó su famosa familia de tipos Gill Sans.