.title {
display: inline-block;
font-size: 15px;
font-weight: bold;
position: relative;
padding: 5px; &::after {
content: '';
height: 2px;
background-color: #fe0000;
// width: 50px;
position: absolute;
bottom: 0;
left: 0px;
right: 0px;
}
}

 <div className={style.title}>推荐产品</div>

一种css效果:标题带色块,React+Less的更多相关文章

  1. React项目 - 几种CSS实践

    前言团队在使用react时,不断探索,使用了很多不同的css实现方式,此篇blog总结了,react项目中常见的几种css解决方案:inline-style/radium/style-componen ...

  2. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

  3. CSS基本知识点——带你走进CSS的新世界

    CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...

  4. 18种CSS3loading效果完整版,兼容各大主流浏览器,提供在线小工具使用

    今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...

  5. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  6. CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  7. 18种CSS3loading效果完整版

    今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...

  8. CSS3实现10种Loading效果(转)

    CSS3实现10种Loading效果  原文地址:http://www.cnblogs.com/jr1993/p/4622039.html 昨晚用CSS3实现了几种常见的Loading效果,虽然很简单 ...

  9. css和js带参数v或version

    1 <span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?versi ...

随机推荐

  1. UOS系统 - 国产统一操作系统UOS的基本知识

    一.UOS操作系统含义及现状 UOS操作系统与windows不同的是,UOS统一操作系统支持龙芯.申威.华为鲲鹏等一票国产处理器芯片.它的诞生是多家国内科技公司联合孕育的结果,包括中国电子集团.武汉深 ...

  2. R语言算法 ▪ 计算随意输入的两数之间的区域和

    sumfu<-function(a,b,n=){ if(a<b){ for(i in a:b){n=n+i} }else for(i in b:a){n=n+i} return <- ...

  3. HTML连载31-制作一个百度首页

    一. 我们制作一个百度首页作为练习,可直接复制该代码保存后缀名为.html来查看 <!DOCTYPE html> <html lang="en"> < ...

  4. MySchool题目

    题目: 1.查询所有学生记录,包含年级名称2.查询S1年级下的学生记录 一.项目目录 二.com.myschool.dao 2.1 BaseDao package com.myschool.dao; ...

  5. 【linux】查看GPU使用率

    nvidia-smi -l 1   每秒刷新一次

  6. 第四节:Geo类型介绍以及Redis批量操作、事务、分布式锁

    一. Geo类型 1. 类型说明 Geo 是 Redis 3.2 版本后新增的数据类型,用来保存兴趣点(POI,point of interest)的坐标信息.可以实现计算两 POI 之间的距离.获取 ...

  7. Kubernetes Pod 资源限制

    Kubernetes Pod 资源限制 官方文档:https://kubernetes.io/docs/concepts/configuration/manage-compute-resources- ...

  8. Java使用路径通配符加载Resource与profiles配置使用

    序言 Spring提供了一种强大的Ant模式通配符匹配,能从一个路径匹配一批资源. Ant路径通配符 Ant路径通配符支持“?”.“*”.“**”,注意通配符匹配不包括目录分隔符“/”: “?”:匹配 ...

  9. IDEA的常用配置(Maven)一键导入及优化内存

    IDEA的常用配置一键导入 一.在https://www.cnblogs.com/zyx110/p/10799387.html中下载如图的压缩包 下载完成后解压缩,点击settings_bak,你会看 ...

  10. WPF-带有GridView的ListView样式

    ListView是展示数据的常用控件,这里简单对带有GridView的ListView样式进行设置. <Style TargetType="{x:Type ListViewItem}& ...