3段h1标题CSS美化代码

一段简单的CSS美化h1,h2,h3,h4,h5,h6代码，很简单css美化功能。

使用的是比较简单的CSS样式美化的

h1{padding: 0px 20px;border-left: 10px solid #ed515191;background-color: rgba(208, 208, 208, 0);font-size: 19px;line-height: 30px;color: cornflowerblue;font-weight: bold;margin: 5px 0;}
h2{padding:0px 20px;border-left: 10px solid #BF51ED91;background-color: rgba(208, 208, 208, 0);font-size:18px;line-height: 30px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}
h3{padding:0px 20px;border-left: 10px solid #6495ed91;background-color: rgba(208, 208, 208, 0);font-size:17px;line-height: 27px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}
h4{padding:0px 20px;border-left: 10px solid #e2aa2b91;background-color: rgba(208, 208, 208, 0);font-size:16px;line-height: 24px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}
h5{padding:0 20px;border-left: 10px solid #64c1c191;background-color: rgba(208, 208, 208, 0);font-size:15px;line-height: 21px;color:cornflowerblue;font-weight:bold;margin: 5px 0;}

使用的是before这种伪元素进行美化的，由于该样式富含机械性，下面只举例一个，孟坤博客效果

h3:before{
font-weight: 600;
position: absolute;
top: 0;
left: -15px;
content: '#';
color: #eb5055;
}
h3{position: relative;}

大前端模版香效果

这个样式对块化的界面显示会好看很多

h3{
margin: 15px 0 15px -20px;
padding: 0 25px;
border-left: 5px solid #51aded;
background-color: #f7f7f7;
font-size: 18px;
line-height: 40px;
}