带有偏移量的 CSS 重复渐变

Question

我正在尝试为我的网站添加一些CSS样式，但我遇到了一些困难，我希望得到您的帮助。

我正在尝试实现以下结果：

https://jsfiddle.net/mb3yzc49/1/

<style>
.gradient {
background: repeating-linear-gradient(#E8EDEF, #e8edee 50px, rgba(255, 255, 255, 0) 50px, rgba(255, 255, 255, 0) 115px);
}
.list-item img {
width: 50px;
height: 50px;
border-radius: 50px;
}
.gradient li {
list-style: none;
padding-bottom: 20px;
}
.list-item {
display: flex;
flex-wrap: wrap;
width: 50px;
}
</style>
<div class="gradient" style="width:100%;">
Title
<ul style="width:100px;">
<li class="list-item">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
text
</li>
<li class="list-item">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
text
</li>
<li class="list-item">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
text
</li>
</ul>
</div>

但我的问题是本节有一个标题，而 HTML 是外部的，所以最终结果如下：

https://jsfiddle.net/mb3yzc49/

您注意到标题的问题，即占用一些背景并导致以下项目未对齐。在不修改 HTML(是外部的(的情况下，是否有任何解决方案？

谢谢。

编辑：对不起格式化，这个编辑器不是那么友好。

Answer 1

只需将标题包装在一个范围内：

<span>Title</span>

并给跨度一个绝对定位：

.gradient > span {
position: absolute;
}