Manter estilos de sublinhado de link em torno do código embutido com preenchimento
Recentemente, text-decoration-trimtext-decoration-inset foi adicionado ao Firefox atrás de um sinalizador, e eu esperava que isso pudesse corrigir uma pequena coisa visual que me incomodou no meu site: a lacuna nos sublinhados do código embutido quando faz parte de um link (por exemplo: A ). Você pode ver isso acontecer em sites populares como GitHub ou Notion, para citar alguns.special link
Não é incomum que o código embutido tenha uma cor de fundo ligeiramente diferente e, por sua vez, um preenchimento para dar ao código algum espaço para respirar no retângulo, evitando que o texto fique preso na borda da caixa. Mas esse é o problema: o preenchimento separará um pouco o elemento inline, fazendo com que o sublinhado no link pai se quebre ao redor do elemento de código. O que podemos fazer?
Parece familiar?
Esse problema é o oposto do meu post do ano passado, Removendo estilos de sublinhado de link entre ícones e texto.
Eu tentei usar a nova propriedade CSS text-decoration-trim (no momento em que este artigo foi escrito, o Firefox não foi atualizado para o novo nome) com um valor de calc(var(--p) * -1) (com --p sendo minha quantidade de preenchimento inline de 0.125em). Infelizmente, o preenchimento ainda faz com que o sublinhado seja ignorado. Eu então tentei adicionar text-decoration: inherit; junto com a inserção negativa, mas deu o mesmo resultado. Ok, que chatice, mas meu entendimento é que o preenchimento é basicamente uma coisa não inline, então não pode ser sublinhado ou algo assim – é justo.
De volta à prancheta.
Às vezes é preciso voltar para seguir em frente. Em vez de tentar consertar isso com CSS totalmente novo, usei… um CSS antigo. Em vez de padding-inlineadicionei alguns ::before e ::after pseudo-elementos com um content definido para um hairspace (sequência Unicode U+200A):
:not(pre) > code {
&::before,
&::after {
content: '\200a';
font-size: 0.5em;
}
}
Trabalho concluído! Certo? Weeeeell…
Se esse espaço de cabelo cair bem no final de uma linha, mas o código real não caber, então pode ser um espaço de cabelo solitário em uma linha e o código na próxima: não é ótimo. A solução é usar um word joiner (U+2060). Isso garantirá que os dois hairspaces estejam conectados aos seus respectivos primeiro e último caracteres no code elemento. Mais encantamentos mágicos Unicode e lá vamos nós: content: '\2060\200a\2060'; A palavra joiners não é necessária em ambos os lados, mas isso torna o código mais conciso e não faz mal, eu acho? Sinta-se à vontade para separar os dois.
Observação
Não tenho certeza se a tecnologia assistiva vai se preocupar com esses caracteres de espaço em branco, portanto, definir o texto alternativo com o mais recente content: '\2060\200a\2060"https://chriskirknielsen.com/"'; a sintaxe parece irrelevante aqui, mas se eu estiver errado, me avise!
A única desvantagem aqui é que se o seu código ocupar duas linhas, o preenchimento não poderá ser repetido no final da primeira linha e no início da segunda com box-decoration-break: clonemas isso é algo com o qual estou disposto a conviver.
E com isso sim, agora terminamos. Envie-o, desligue o computador e faça uma longa caminhada.
PS: não, este não é nem o pior título de post que consegui pensar, por que você pergunta?
