我应该在居中的UL菜单的两侧添加一条水平线。页面上有背景图像，因此解决方案必须具有透明背景。线条必须到达屏幕的两侧。我见过几个例子，https://stackoverflow.com/a/23584310/4266235 非常接近我需要的。
但我有一个我无法解决的区别。在首页上，我在菜单下有一个大徽标，但在所有其他页面上，徽标较小，位于菜单左侧。
这就是我想要的：
首页：
|-------- Home Page1 ... PageN --------|
| [Large logo] |
所有其他页面：
|---- [small logo] Home Page1 ... PageN ----|
第一个问题是小徽标是使用 ul：before 完成的。类似的东西
#navi { margin: 0; text-align: center; }
#navi ul { list-style-type: none; }
#navi ul:before { display: inline-block; content: url("small-logo.png"); vertical-align: middle;}
.front-page #navi ul:before { content: ""; }
其中首页有<正文类>
如果我使用代替小徽标，我可以在首页上获得很好的线条，但在其他页面上，左侧的线条继续太靠近菜单。显然是因为我不知道如何在徽标之前阻止它。很好，我的意思是我必须更改我链接的答案中的百分比才能使它们到达窗口边框，但即使使用 100%，如果我使用 CTRL-减号缩放页面，它们也不会触及边框。
编辑：这是一个小提琴示例 https://jsfiddle.net/sowcoox1/红线也应该出现在左侧。如果有徽标图像，则行应在"主页"文本之前停止，如果没有，则在"主页"文本之前停止。此外，线条似乎到达屏幕边框，但如果您缩小，结果发现线条不够长。
您可以将行创建为包装元素的背景图像，并为ul元素提供覆盖其后面行的背景：
https://jsfiddle.net/sowcoox1/1/
如果无法为ul提供背景颜色，则可以在包装器元素中使用多个背景图像，或者为行使用单独的元素。如果您知道ul的宽度，这将容易得多。