カスタマイズを考える際のヒントになればという事で、「こうしたらこういうことができるよ」みたいなのの情報共有用にトピックを立てました。

本トピックに投稿いただく際は他の方が見つけやすいように、検索されそうなワードを併記していただけますと幸いです。

需要はさておき、わんコメアプリ上の枠名を表示するやつです。

.comment:before{
  content:"["attr(data-service-name)"]";
}

---

（追記）
ちなみに「-name」を取ると配信サイト名表示になります。

.comment:before{
  content:"["attr(data-service)"]";
}

CSSだけで各コメントの配信サイトのそれっぽい目印を表示！

（※下画像は「slim」テンプレート）

※上記画像では名前の手前に目印付いていますが、コメントの手前の表示にも対応しています。
下記サンプルコードではデフォルトで両方表示になっていますので、使わない方は「display:none」してください。

---

/* 共通のスタイル、名前の前とコメントの前両方同時に設定 */
.comment-text:before , .name:before{
  display: inline-block;  overflow: hidden;
  width:1.5em; height:0.95em;
  padding: 0.2em 0 0 0;  margin: 0 0.2em 0 0;
  border:solid 0.1em black;
  font-size:0.75em;  line-height: 0.75em;
  vertical-align: middle;  text-align: center;
  font-weight: bold;    text-shadow: none;
}

/* 表示切替用、使用しない方を「display:none」で非表示にできます */
.comment-text:before{display: inline-block;}
.name:before{display: inline-block;}


/* 以降は各サイト別の見た目を個別に設定しています。
（名前の前とコメントの前の両方分一括指定） */

.comment[data-service="youtube"] .comment-text:before ,
.comment[data-service="youtube"] .name:before {
    content:"YT";  color: white;
    background: red;
}
.comment[data-service="twicas"] .comment-text:before ,
.comment[data-service="twicas"] .name:before {
    content:"TC";  color: white;
    background: dodgerblue;
}
.comment[data-service="twitch"] .comment-text:before ,
.comment[data-service="twitch"] .name:before {
    content:"tw";
    color: white;  background: blueviolet;
    font-weight: normal;
}
.comment[data-service="showroom"] .comment-text:before ,
.comment[data-service="showroom"] .name:before {
    content:"SR";  color: white;
    background: black;
}
.comment[data-service="bilibili"] .comment-text:before ,
.comment[data-service="bilibili"] .name:before {
    content:"bili";  color: dodgerblue;
    background: white;
    font-weight: normal;
}
.comment[data-service="mixch"] .comment-text:before , 
.comment[data-service="mixch"] .name:before {
    content:"ﾐｸ";  color: white;
    background: orangered;
    font-weight: normal;
}
.comment[data-service="mirrativ"] .comment-text:before ,
.comment[data-service="mirrativ"] .name:before {
    content:"Ｍ";  color: white;
    background: turquoise;
}
.comment[data-service="twitter"] .comment-text:before ,
.comment[data-service="twitter"] .name:before {
    content:"tw";  color: white;
    background: deepskyblue;
}
.comment[data-service="niconama"] .comment-text:before ,
.comment[data-service="niconama"] .name:before {
    content:"ﾆｺ";  color: black;
    background: white;
}

---

※添付画像以降にtwitchの背景色変更しました。

---

検索受け用キーワード

テンプレートのコメントに配信サイトごと（配信サイト別）に目印マークを表示