纯CSS给你的网站多说评论“上V”

这个没什么技术含量,主要用的是CSS的伪类after。

注意:橙V(见下图)需要用到FontAwesome字体图标。

橙V.png

本站在用的金V代码

#ds-thread #ds-reset a.ds-user-name[data-user-id='多说ID']:after{
     content: "V";
    margin-left: 6px;
    font-size: 12px;
    color: #EBCD3E;
    border-radius: 3px;
    padding: 1.5px 4px;
    display: inline-block;
    margin: 0 5px;
    font-weight: 900;
    background: #CE1B08;}

上图的橙V代码

蓝V,把下面代码种的color属性值换成#2eb0f9

#ds-thread #ds-reset a.ds-user-name[data-user-id='多说ID']:after{
    content: "\f27d";
    margin - left: 5 px;
    color: #ffb600; 
    margin: 0 5 px;
    font: normal normal normal 14px/1 FontAwesome;
   
}

多个用户添加方式:

#ds-thread #ds-reset a.ds-user-name[data-user-id='多说用户IDA']:after,#ds-thread #ds-reset a.ds-user-name[data-user-id='多说用户IDB']:after{
    content: "\f27d";
    margin - left: 5 px;
    color: #ffb600; 
    margin: 0 5 px;
    font: normal normal normal 14px/1 FontAwesome;
   
}

用逗号隔开就行。

文章翻页

 
已有 14 条评论
  1. lawgeek
    小乖.png 这个评论框好帅,怎么实现的,可以分享吗?顺求友链 滑稽.png
    lawgeek 回复
    1. 落叶大大
      @lawgeek 滑稽.png 你说的评论还是表情?
      落叶大大 回复
      1. lawgeek
        @落叶大大 评论框跟表情 真棒.png
        lawgeek 回复
        1. 落叶大大
          @lawgeek 你懂的.png 你懂的.png 有空放出来
          落叶大大 回复
  2. 聖赒
    可以的
    聖赒 回复
  3. 橘纸柚
    拿走了滑稽.png
    橘纸柚 回复
    1. 落叶大大
      @橘纸柚 你懂的.png
      落叶大大 回复
  4. 轻梦
    滑稽.png雪花交出来
    轻梦 回复
    1. 落叶大大
      @轻梦 哈哈.png等哈,在整理
      落叶大大 回复
  5. 王玲子
    阴险.png
    王玲子 回复
  6. Janervy
    黄v来测试你懂的.png滑稽.png
    Janervy 回复
    1. 落叶大大
      @Janervy 喷.png 那是金V
      落叶大大 回复
      1. Janervy
        @落叶大大 你懂的.png嗯嗯~~~
        Janervy 回复
        1. 落叶大大
          @Janervy 滑稽.png
          落叶大大 回复