纯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;
   
}

用逗号隔开就行。

本站采用「署名 4.0 国际(CC BY 4.0)」创作共享协议,转载请注明本文出处及链接。

Tags: fontawesome,CSS,上V

文章翻页

头像
游客
发表评论
  1. lawgeek

    小乖.png 这个评论框好帅,怎么实现的,可以分享吗?顺求友链 滑稽.png

  2. 可以的

  3. 拿走了滑稽.png

  4. 滑稽.png雪花交出来

  5. 阴险.png

  6. 黄v来测试你懂的.png滑稽.png