Pseudo-elemento CSS ::first-letter
Use o pseudo-elemento CSS ::first-letter para selecionar e aplicar estilos à primeira letra da linha. Saiba mais sobre o pseudo-elemento e experimente os exemplos.
O pseudo-elemento ::first-letter aplica estilos à primeira letra da primeira linha num contentor ao nível de bloco. Não seleciona elementos ao nível inline, como imagens ou tabelas inline.
O pseudo-elemento ::first-letter não seleciona os sinais de pontuação que precedem ou seguem imediatamente a primeira letra. Aplica-se apenas a caracteres alfabéticos, não a números ou símbolos.
A especificação CSS3 introduziu ::first-letter para distinguir as pseudo-classes dos pseudo-elementos.
Propriedades permitidas
Eis as propriedades CSS que podem ser utilizadas com o pseudo-elemento ::first-letter:
Propriedades de tipo de letra: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-weight, font-size, font-size-adjust, line-height e font-family.
Propriedades de fundo: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image e background-clip.
Propriedades de margem: margin, margin-top, margin-right, margin-bottom, margin-left.
Propriedades de padding: padding, padding-top, padding-right, padding-bottom, padding-left.
Propriedades de borda: abreviadas (shorthands), border-style, border-color, border-width, border-radius, border-image, longhands.
A propriedade color.
As propriedades text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (quando apropriado), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (apenas float: none;).
Versão
Sintaxe
Exemplo de sintaxe CSS ::first-letter
::first-letter {
css declarations;
}Exemplo do pseudo-elemento ::first-letter:
Exemplo de código CSS ::first-letter
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::first-letter {
font-size: 35px;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>::first-letter selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Resultado
Exemplo do pseudo-elemento ::first-letter com um sinal de pontuação e um dígito:
Exemplo de código ::first-letter
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::first-letter {
font-size: 35px;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>::first-letter selector example</h2>
<p>-Lorem ipsum is simply dummy text...</p>
<p>1Lorem ipsum is simply dummy text...</p>
</body>
</html>