CSS separates color borders

Question

It’s hard for me to figure out how to apply a separator border to an element using CSS.

The effect I'm trying to achieve is this:

If the red line and gray line occupy% of the width of the elements. Preferably, I would like to apply this effect to an element using one class.

Edit: for those requesting a sample code:

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

Answer 1

Red text and red underline? There is simple CSS for this.

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

Answer 2

Well, assuming you want to use one class and not seeing your exact markup, this will work:

 <div class="message"> <span>DDOS</span> <span>Protection</span> </div> 

And then your CSS might look like this:

 .message span { border-bottom: 1px solid #ccc; padding-bottom: 5px; color: #ccc; } .message span:first-child { border-bottom-color: red; color: red; margin-right: 10px; } 

Here 's a jsFiddle demo .

Answer 3

You can also try playing with :before and :after :

 .line { background-color: #DDD; padding: 5px 10px; position: relative; } .line:before, .line:after { content: ''; width: 10%; height: 2px; background-color: red; position: absolute; bottom: 0; left: 0; } .line:after { width: 90%; background-color: green; left: 10%; } 

http://jsfiddle.net/DHDuw/

Answer 4

Ok, I did a similar one, but I was asked vertically, but now I am changing the direction of the gradient to help you

Demo (works in Chrome , if someone knows Cross-Browser, please feel free to edit, because I use old browsers so that I can’t verify them)

CSS

 div { font: 40px Arial; background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }