标题渐变分割线

由after伪元素实现

阅读视图

/Heading Line/

h1:after {
content: “”;
display: block;
width: 99%;/线条长度/
height: 4px;/线条宽度/
background: linear-gradient(to right, #BE002F/殷红/, transparent);
left: 0;
border-radius: 5px;/线条圆角/
}

h2:after {
content: “”;
display: block;
width: 85%;
height: 3px;
background: linear-gradient(to right, #95509F/青莲紫/, transparent);
left: 0;
border-radius: 5px;
}

h3:after {
content: “”;
display: block;
width: 70%;
height: 2px;
background: linear-gradient(to right,#AB96C5/浅石英紫/, transparent);
left: 0;
border-radius: 5px;
}

h4:after {
content: “”;
display: block;
width: 50%;
height: 2px;
background: linear-gradient(to right, #EAAD1A/虎皮黄/, transparent);
left: 0;
border-radius: 5px;
}

h5:after {
content: “”;
display: block;
width: 40%;
height: 2px;
background: linear-gradient(to right, #F4D7B4/真丝绸色/, transparent);
left: 0;
border-radius: 5px;
}

编辑视图

慎用，用的话注意不要在标题写其他格式，只写文本。

.cm-header-1:nth-of-type(2)::after {
content: “”;
display: block;
width: 99%;
height: 4px;
background: linear-gradient(to right, #BE002F, transparent);
left: 0;
border-radius: 5px;
}

.cm-header-2:nth-of-type(2)::after{
content: “”;
display: block;
width: 85%;
height: 3px;
background: linear-gradient(to right, #95509F, transparent);
left: 0;
border-radius: 5px;
}
.cm-header-3:nth-of-type(2)::after {
content: “”;
display: block;
width: 70%;
height: 2px;
background: linear-gradient(to right,#AB96C5, transparent);
left: 0;
border-radius: 5px;
}

.cm-header-4:nth-of-type(2)::after {
content: “”;
display: block;
width: 50%;
height: 2px;
background: linear-gradient(to right, #EAAD1A, transparent);
left: 0;
border-radius: 5px;
}
.cm-header-5:nth-of-type(2)::after {
content: “”;
display: block;
width: 40%;
height: 2px;
background: linear-gradient(to right, #F4D7B4, transparent);
left: 0;
border-radius: 5px;
}