👩🏽‍💻 CSS | Enfeitando com text-emphasis

Correção feita no dia 21/04/2025.

Enfeite seu texto com flores e borboletas, mas só se quiser. Foto de Pixabay.

Ainda sobre a minha diversão com CSS, estive experimentando a propriedade text-emphasis, que é uma forma de destacar caracteres adicionando OUTRO caractere acima ou abaixo de cada caractere do texto.

• Espaços em branco - incluindo caracteres que geram espaço em branco, como   - não recebem caractere de ênfase.
• A distribuição fica mais organizada em fonte monoespaçada.
• Fica mais fácil ver o caractere de ênfase com fonte grande.
• Por padrão, o caractere extra fica acima do texto, mas é possível mudar a posição.

Em text-emphasis, é possível definir text-emphasis-style e text-emphasis-color, nessa ordem. Assim, você pode escrever das duas formas:

div {text-emphasis:circle dodgerblue;}

div {text-emphasis-style:circle; text-emphasis-color: dodgerblue;}

Por padrão, a ênfase é exibida sobre o texto. Para mudar a posição da ênfase, precisará de text-emphasis-position, essa propriedade deve ser escrita separadamente:

div {text-emphasis:circle dodgerblue;
text-emphasis-position:under;}

Em text-emphasis-style, são aceitos os seguintes valores:

text-emphasis-style: none|filled|open|dot|circle|double-circle|triangle|sesame|string|color|initial|inherit;

Estes são os formatos:

dot

é um círculo pequeno preenchido.

circle

é um círculo preenchido, maior que dot.

double-circle

é um círculo prenchido dentro de um círculo aberto.

triangle

é um triângulo.

sesame

é uma sementinha, um gergelim.

string

A opção string deixa você escolher um caractere, basta colocá-lo entre aspas. Aqui temos text-emphasis-style:'🦜'.

E você pode adjetivar:

open

Se escrever apenas open, será um círculo pequeno (dot) aberto. Mas você pode usar open circle, open triangle, open sesame e open double-circle.

filled

Se escrever apenas filled, é um círculo pequeno (dot) preenchido. Como filled é o padrão, geralmente não será necessário escrever filled circle, filled triangle, filled sesame ou filled double-circle.

Em text-emphasis-position, a posição padrão é superior (over), então é possível personalizar para under. Para o caso de texto vertical, também é possível definir left e right.

text-emphasis-position: over|under|left|right|initial|inherit;

Aplicando, teremos:

div.alegre {text-emphasis-position:under left;}
div.feliz {text-emphasis-position:over right;}

No exemplo abaixo, o caractere de ênfase está abaixo (under) do texto no modo horizontal. Ao clicar na caixa, o texto fica no sentido vertical e os caracteres passam para a parte de cima do texto, que neste caso é right (direita).

Clique para girar.

O exemplo abaixo mostra como o recurso fica mais elegante numa fonte grande e monoespaçada:

div.enfatico {text-emphasis:double-circle deeppink; text-emphasis-position:under left; font-size:120%; font-family:"Courier New",monoespace; margin:50px;}

É mais fácil identificar os caracteres de ênfase se a fonte for monoespaçada e grande.

No exemplo abaixo, apliquei uma mudança de caractere com :hover (não confundir com over).

div.correio {text-emphasis-style:"📬"; margin:50px; text-emphasis-position:under left;}
div.correio:hover, div.correio:active {text-emphasis-style:"📭";}

Aqui, usei um emoji que muda quando o mouse está sobre o texto. No celular, clique para ver a mudança.

No CodePen, eu estive fazendo experimentos para descobrir melhor as diferenças entre text-emphasis e text-decoration:

See the Pen text-decoration e text-emphasis by Helen Fernanda (@helenfernanda) on CodePen.

Você encontra mais informações sobre text-emphasis nos sites MDN e W3Schools.