html - 边框底部，环绕文本

Question

我在用 css 包装时遇到问题。我需要红色边框底部以单词“somewordhere”开头..此处不允许使用跨度/其他 html 方法的解决方案，因为文本是从 CMS 生成的……我需要什么-> http://i.imgur。 com/JWd1X.png

第二排 Intouchables 还可以

谢谢

http://jsfiddle.net/XGRwy/384/

ul { text-align:center; padding: 10px; border: 2px solid green}
li { margin: 10px 0 10px; display: inline-block; border-bottom: 2px solid red;}
li a {text-decoration:none; border-left: 2px solid orange; }

<ul style="width: 150px">
   <li>
      <a href="http://some">BEGIN........END somewordhere</a>
   </li>
   <li>
      <a href="http://some">Intouchables</a>
   </li>    
</ul>

​</p>

Answer 1

我偏离了 Fabricio 提出的您所说的应该是什么样子的图像。

我删除了左边框调用并将其放在“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;  }

这是jsFiddle工作示例。