css - Create separate line for specific use -

i wanted create separate line , and use of hr tag

the problem want apply specific line , not line, how can this?

hr {     border: #333333;     height: 2px;     background-color: lightgray; } 

is want:

html:

<div>abc</div> <hr class="red" /> <div>def</div> <hr /> <div>ghi</div> 

css:

.red{     border:1px solid red; } hr{     border:1px solid black; } 

fiddle demo