84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
前端小白，实在不知道怎么描述这个效果，只知道后面那条线可以用gradient去实现看看，求大神指点！谢谢!
业精于勤，荒于嬉;行成于思，毁于随。
不用楼上这么复杂
HTML:
电影
CSS:
p{ font-size: 30px; } p::before, p::after{ content: ""; margin: 0 10px; height: 20px; display: inline-block; vertical-align: -0.2ex; border-left: 1px solid red; } p::after{ width: 150px; background: linear-gradient(to right,red,transparent) bottom/100% 1px no-repeat; }
这里主要是 background 的属性的问题，这里用到的格式如下：
background: background-image background-position/background-size background-repeat;
文字前后的修饰 分别使用伪元素实现通过设置伪元素的border属性
gradient不能给border的颜色渐变，所以就分两个span来写，基本实现了，具体样式值，就自己改吧。还有gradient的兼容性，inline-block间像素的去除方法，再仔细的百度吧。
不用楼上这么复杂
HTML:
CSS:
这里主要是 background 的属性的问题，这里用到的格式如下：
文字前后的修饰 分别使用伪元素实现
通过设置伪元素的border属性
gradient不能给border的颜色渐变，所以就分两个span来写，基本实现了，具体样式值，就自己改吧。还有gradient的兼容性，inline-block间像素的去除方法，再仔细的百度吧。