There are several ways. Which one to use depends on your taste. In all cases, the trick is to position the element with the 'width', 'margin-left' and 'margin-right' properties. Here is a solution that uses the 'border' property to put a line above the HR element.
CSS FAQ
common constructs
HR {
margin: 0.5em 60% 0.5em 0;
border-top: solid
}
The 'margin' property puts half an em of space above and below the rule and makes the right margin 60% (of the parent's width). The line is therefore 40% of the parent's width long.
Here is another solution, that creates a black rectangle by using the 'background' and 'height' properties.
HR {
margin: 0.5em 60% 0.5em 0;
height: 0.04em;
background: black
}
The black rectangle is 0.04em high and has a width of 40% of the parent's width.