Adicione tags <abbr> a palavras em posts

Personalização Componente de tema
30

Depois de mexer por meio dia, consegui criar o código usando o bot Discourse AI do @Falco :muscle:
Tenho recebido ajuda de um bot há duas semanas, seja aqui no Meta (em termos de busca pelo significado da consulta) ou no meu site com a escrita deste ou daquele código. Aqui está o código que consegui juntar para resolver o problema acima:

abbr[title] {
    position: absolute;
    background: transparent; /* Fundo transparente no estado inativo */
    overflow: visible; /* Permite que o conteúdo saia dos limites do elemento */
}

@media (prefers-color-scheme: light) {
    abbr[title] {
        color: var(--primary); /* Tom branco ou preto para o script? */
    }
}
abbr[title]:hover {
    background: #FF6; /* Ao passar o mouse, o fundo banha em um tom vibrante de amarelo. */
}
abbr[title]:hover:after {
    content: " " attr(title) "";
    position: absolute;
    border-radius: 3px;
    bottom: 70%; /* Altere este valor para controlar a discrepância. */
    left: 0;
    width: 250px; /* Largura fixa */
    height: auto; /*"Elevação ajustável" */
    padding: 2px;
    z-index: 9;
    background: #00FF00; /* Especifique o tom de fundo para o comentário. */
    color: #333;
    margin-bottom: 10px; /* Incorpore uma margem inferior para criar uma separação. */
}

Estou deixando isso aqui; talvez alguém ache útil :slightly_smiling_face:

Ps. Tenha leniência caso encontre algum erro no código, pois eu não sou de forma alguma um engenheiro de software de profissão.

6 curtidas