AI回答の引用元(ソース)表示演出

<div class="d10-06-12-box">
          <p class="d10-06-12-msg">WordPressでのSEO対策は、まずタイトルタグの最適化<span class="d10-06-12-cite" data-src="Yoast SEO 公式ガイド">1</span>と、内部リンク構造の見直し<span class="d10-06-12-cite" data-src="Google 検索セントラル">2</span>から始めるのが効果的です。</p>
          <div class="d10-06-12-source">引用元を選択してください</div>
        </div>

.d10-06-12 .d10-06-12-box{width:100%;max-width:250px}
        .d10-06-12 .d10-06-12-msg{margin:0;font-size:12px;line-height:1.9;color:#374151}
        .d10-06-12 .d10-06-12-cite{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin:0 1px;border-radius:4px;background:#eef2ff;color:#4338ca;font-size:9px;font-weight:700;cursor:pointer;vertical-align:2px;opacity:0;transform:translateY(4px);animation:d1612In .4s ease forwards}
        .d10-06-12 .d10-06-12-cite:nth-of-type(1){animation-delay:.3s}
        .d10-06-12 .d10-06-12-cite:nth-of-type(2){animation-delay:.6s}
        @keyframes d1612In{to{opacity:1;transform:translateY(0)}}
        .d10-06-12 .d10-06-12-source{margin-top:12px;padding:9px 12px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;font-size:11px;color:#6b7280}

(function(){
          var root = document.currentScript.closest('.item');
          var cites = root.querySelectorAll('.d10-06-12-cite');
          var source = root.querySelector('.d10-06-12-source');
          cites.forEach(function(c){
            c.addEventListener('click', function(){
              source.textContent = '出典 ' + c.textContent + ': ' + c.getAttribute('data-src');
            });
          });
        })();