CSS：文本渐变后的线条

我试图在渐变文本后面画一条双线

• 文本渐变是通过使用渐变设置背景，然后使用剪辑路径来跟踪文本来实现的

文本后面的行通常是在父元素的中间添加一行，然后将该子设置为父背景颜色。

我遇到了一些问题，因为它们都需要使用

background

的属性

请阅读以下代码：

正文{
背景：灰色；
}
@关键帧textBG{
0% {
背景位置x:0；
}
100% {
背景位置x:10000px；
}
}
背景{
位置：相对位置；
z指数：1；
}
.line behind.background:：before{
边框顶部：2个实心#dfdfdf；
内容：“；
保证金：0自动；
/*这将使线居中到指定的全宽*/
位置：绝对位置；
/*此处的定位必须是绝对的，相对定位必须应用于父对象*/
最高：50%；
左：0；
右：0；
底部：0；
宽度：95%；
z指数：-1；
}
.line-behind.background-span{
/*要隐藏文本后面的行，必须将背景颜色设置为与容器相同*/
背景：灰色；
填充：0 15px；
}
.后面一行.前面一行{
/*这只是在从上面设置样式之前撤消：：*/
边界顶部：无；
}
.后面一行.后面一行{
边框底部：1px纯蓝色；
-webkit盒阴影：0 1px 0 0红色；
-moz盒阴影：0 1px 0 0红色；
长方体阴影：0 1px 0 0红色；
内容：“；
保证金：0自动；
/*这将使线居中到指定的全宽*/
位置：绝对位置；
最高：45%；
左：0；
右：0；
宽度：95%；
z指数：-1；
}
.文本渐变{
字体系列：“Roboto”，无衬线；
字号：700；
字体大小：42px；
颜色：透明；
背景：线性梯度（向左，#1e5799，#2ce0bf，#76dd2c，#dba62b，#e02cbf，#1e5799）；
背景尺寸：1000px 100%；
动画：textBG 15s线性无限；
背景剪辑：文本；
-webkit背景剪辑：文本；
}
.文本渐变：：选择{
颜色：白色；
背景：darkorchid；
}
#货架形象{
位置：固定；
最大宽度：100vw；
最大高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
#书架图像标题{
宽度：100vw；
高度：8vh；
文本对齐：居中；
}
#货架区{
宽度：100vw；
高度：92vh；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
对齐项目：居中；
边框：虚线；
}
#书架图像容器{
溢出：自动；
宽度：80vmin；
高度：80vmin；
边界：双；
}
#书架图像信息{
宽度：50vmin；
高度：80vmin；
边框：1px实心；
}

设置
在这里
这里

希望这项工作能为您完成。你可以通过在文本前加一个div和在文本后加一个div来实现这一点。然后对其进行样式设置，使线条位于文本的左侧和右侧，并且文本居中。看看我做的这个例子：

正文{
背景：灰色；
}
@关键帧textBG{
0% {
背景位置x:0；
}
100% {
背景位置x:10000px；
}
}
背景{
位置：相对位置；
z指数：1；
}
.line behind.background:：before{
边框顶部：2个实心#dfdfdf；
内容：“；
保证金：0自动；
/*这将使线居中到指定的全宽*/
位置：绝对位置；
/*此处的定位必须是绝对的，相对定位必须应用于父对象*/
最高：50%；
左：0；
右：0；
底部：0；
宽度：95%；
z指数：-1；
}
.line-behind.background-span{
/*要隐藏文本后面的行，必须将背景颜色设置为与容器相同*/
背景：灰色；
填充：0 15px；
}
.后面一行.前面一行{
/*这只是在从上面设置样式之前撤消：：*/
边界顶部：无；
}
.这条线{
边框底部：1px纯蓝色；
-webkit盒阴影：0 1px 0 0红色；
-moz盒阴影：0 1px 0 0红色；
长方体阴影：0 1px 0 0红色；
内容：“；
保证金：0自动；
/*这将使线居中到指定的全宽*/
最高：45%；
z指数：-1；
宽度：100%；
}
.文本渐变{
字体系列：“Roboto”，无衬线；
字号：700；
字体大小：42px；
颜色：透明；
背景：线性梯度（向左，#1e5799，#2ce0bf，#76dd2c，#dba62b，#e02cbf，#1e5799）；
动画：textBG 15s线性无限；
背景剪辑：文本；
-webkit背景剪辑：文本；
对齐项目：居中；
证明内容：中心；
显示器：flex；
}
.文本渐变：：选择{
颜色：白色；
背景：darkorchid；
}
#货架形象{
位置：固定；
最大宽度：100vw；
最大高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
#书架图像标题{
宽度：100vw；
高度：8vh；
文本对齐：居中；
}
#货架区{
宽度：100vw；
高度：92vh；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
对齐项目：居中；
边框：虚线；
}
#书架图像容器{
溢出：自动；
宽度：80vmin；
高度：80vmin；
边界：双；
}
#书架图像信息{
宽度：50vmin；
高度：80vmin；
边框：1px实心；
}

设置
在这里
这里

希望这项工作能为您完成。你可以通过在文本前加一个div和在文本后加一个div来实现这一点。然后对其进行样式设置，使线条位于文本的左侧和右侧，并且文本居中。看看我做的这个例子：