Add <abbr> tags to words in posts

カスタマイズ テーマコンポーネント
30

半日いじくり回した結果、@Falco さんの Discourse AI ボットを使ってコードを作成することができました :muscle:
現在、2週間にわたりボットから支援を受けています。Meta（クエリの意味を検索する際）でも、私のウェブサイトでこのコードやあのコードを書く際にもです。上記の問題を解決するためにまとめることができたコードは以下の通りです。

abbr[title] {
    position: absolute;
    background: transparent; /* 非アクティブ状態では透明な背景 */
    overflow: visible; /* コンテンツが要素の境界からはみ出すことを許可 */
}

@media (prefers-color-scheme: light) {
    abbr[title] {
        color: var(--primary); /* スクリプトの白または黒の色合い？ */
    }
}
abbr[title]:hover {
    background: #FF6; /* ホバーすると、背景が鮮やかな黄色の色合いに包まれます。*/
}
abbr[title]:hover:after {
    content: " " attr(title) "";
    position: absolute;
    border-radius: 3px;
    bottom: 70%; /* この値を変更して、ずれを制御します。 */
    left: 0;
    width: 250px; /* 固定幅 */
    height: auto; /*"調整可能な高さ" */
    padding: 2px;
    z-index: 9;
    background: #00FF00; /* コメントの背景色合いを指定します。 */
    color: #333;
    margin-bottom: 10px; /* 下部の余白を組み込んで、区切りを作成します。 */
}

ここに残しておきます。誰かの役に立つかもしれません :slightly_smiling_face:

追伸。私は専門のソフトウェアエンジニアではないため、コードにエラーが見つかった場合は寛大にお願いします。

「いいね！」 6