Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

Primera letra, primera línea CSS

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;
}
<p class="capitular">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.</p>
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: '
}
<p class="capitular _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.</p>
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 capitularstar 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;
}
<p class="letra capitular">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.</p>
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;
}
<p class="letra capitular primera-linea">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.</p>
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.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas