Add <abbr> tags to words in posts

Componente temático
30

Después de experimentar durante medio día, pude crear el código usando el bot Discourse AI de @Falco :muscle:
He estado recibiendo ayuda de un bot durante dos semanas, ya sea aquí en Meta (en términos de buscar el significado de la consulta) o en mi sitio web con la escritura de este o aquel código. Aquí está el código que pude armar para resolver el problema anterior:

abbr[title] {
    position: absolute;
    background: transparent; /* Fondo transparente en estado inactivo */
    overflow: visible; /* Permite que el contenido salga de los límites del elemento */
}

@media (prefers-color-scheme: light) {
    abbr[title] {
        color: var(--primary); /* ¿Tono blanco o negro para el script? */
    }
}
abbr[title]:hover {
    background: #FF6; /* Al pasar el cursor, el fondo se baña en un tono amarillo vibrante. */
}
abbr[title]:hover:after {
    content: " " attr(title) "";
    position: absolute;
    border-radius: 3px;
    bottom: 70%; /* Modifica este valor para controlar la discrepancia. */
    left: 0;
    width: 250px; /* Ancho fijo */
    height: auto; /* "Elevación ajustable" */
    padding: 2px;
    z-index: 9;
    background: #00FF00; /* Especifica el tono de fondo para el comentario. */
    color: #333;
    margin-bottom: 10px; /* Incorpora un margen inferior para crear una separación. */
}

Lo dejo aquí; quizás alguien lo encuentre beneficioso :slightly_smiling_face:

Ps. Sea indulgente si encuentra un error en el código, ya que inequívocamente no soy ingeniero de software de profesión.

6 Me gusta