html – CSS分割边框颜色

我无法弄清楚如何使用CSS在元素上应用分割边框.

我想要达到的效果是这样的：

红线和灰线占据了元素宽度的百分比.优选地,我想使用单个类将该效果应用于元素.

编辑：对于那些要求代码示例的人：

<!-- spans width 100% -->
<div id="wrapper">
    <h1 class="title">DDOS Protection </h1>
</div>

解决方法

红色文字和红色下划线？这有一些简单的CSS.

<span style='color:red; border-bottom: 1px solid red;'>DDOS</span>
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span>