How to set width of a <hr/> in CSS to X number of pixels less than the width:auto?

Question

I have a nav with some <hr/> elements. Preferably in pure CSS (3?), how would set the width of the horizontal rules to auto minus X number of pixels?

_{This does not duplicate this question , because it is for what would equate to negative padding, which is impossible.}

Answer 1

You could use the below.

hr {
    width: auto;
    margin: 0 10px; /* This leaves 10px margin on left and right. If only right margin is needed try margin-right: 10px; */
}

Answer 2

Try using margin-right

Or you could use Javascript for something more specific. For eg:

CSS:

hr {
   margin-right:20px;
   width:auto;    
}

Demo