Html 边框底部，换行文本

我对css中的包装有问题。我需要红色边框底部以单词“somewordhere”开始…此处不允许使用span/其他html方法的解决方案，因为文本是从CMS生成的…我需要的->

第二排不可触摸的可以

谢谢

ul{文本对齐：居中；填充：10px；边框：2px纯绿色}
li{边距：10px 0 10px；显示：内联块；边框底部：2px实心红色；}
li a{文本装饰：无；左边框：2px纯橙色；}
宽度：150px>

---

​

我偏离了法布里西奥展示的图像，你说它应该是什么样子

我删除了左边的边界调用并将其放在“li”上，然后使“li”的宽度为100%

ul { text-align:center; padding: 10px; border: 2px solid green; width: 150px; }
li { width: 100%; margin: 10px 0 10px; border-bottom: 2px solid red; border-left: 2px solid brown;}
li a {text-decoration:none;  }

---

这是一个工作示例。

你能在

中包装

开始…….END

吗？我需要css，因为文本是从CMS系统生成的。第一行应该是这样的吗？如果你放一个

而不是让它包装，或者如果你给它一个设置宽度的

display:inline block

，它是有效的，但我想这些都不是很令人满意的。float:left不是解决方案，因为红线应该从这里开始

ul { text-align:center; padding: 10px; border: 2px solid green; width: 150px; }
li { width: 100%; margin: 10px 0 10px; border-bottom: 2px solid red; border-left: 2px solid brown;}
li a {text-decoration:none;  }