コンポーネント|ユーザー名後の情報表示

2024年12月12日#t65

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

この内容は、特定のユーザー名の後に「命令行」アイコンを追加する方法について説明しています。ブラウザのコンソールで特定のセレクタを使用して、擬似要素を追加し、見た目をカスタマイズする手順が示されています。具体的には、CSSを使って「PO主」というテキストを追加し、スタイルを設定する方法が紹介されています。

就类似于这位用户名后面的「命令行」图标

実現思路

あなたのユーザー名のアドレスに移動し、追加コンテンツ「::after」を持っていけば大丈夫です。

ブラウザのコンソールで見つけてください:

<a class="font-medium text-accent" href="https://sino.xlog.app" target="_blank" rel="nofollow noreferrer">｢云华｣CloudSino</a>

そして擬似要素を追加します:
(このセレクタは問題ないはずですので、リンクは自分で修正してください)

<style>
.xlog-comment-list .font-medium.text-accent[href="https://sino.xlog.app"]::after {
  content: "入力内容";
};
</style>

装飾して、整えましょう

.xlog-comment-list .font-medium.text-accent[href="https://sino.xlog.app"]::after {
  content: "PO主";
  background: turquoise;
  color: rgb(var(--tw-color-white)/var(--tw-text-opacity));;
  padding: .2em;
  border-radius: 5px;
  font-size: 80%;
  font-weight: bold;
  --tw-space-x-reverse: 0;
  margin-right: calc(.25rem * var(--tw-space-x-reverse));
  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)));
  word-break:keep-all;
}