Align <hr> to the left in an HTML5-compliant way

Question

Currently, I'm using

<hr align="left" />

on my HTML5 page, but I've read that the align property was deprecated in XHTML 4.01 and supposedly removed from HTML5. I'd like to be using CSS rather than an inline attribute like this, but when I tried

hr{align: left; max-width: 800px;}

or hr{text-align: left;} or hr{left: 0;} or hr{float: left;}, it just showed up in the center.

So what should I use instead of the inline attribute above?

Answer 1

You're trying to use something in a way that (as Eliezer Bernart mentions.. and apparently that comment with the link to the MDN doc disappeared) no longer "works that way". You can, as long as you don't mind it being screwy in IE, just set the margin to zero - http://jsfiddle.net/s52wb/

hr {
    max-width: 100px;
    margin: 0px;
}

A better idea though would be to mimic the HR's old way of doing things by way of CSS without the use of the HR. Check out http://jsfiddle.net/p5ax9/1/ for a demo:

p:first-child:before {
    display: none;
}
p:before {
    content: " ";
    border: 1px solid black;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block;
    max-width: 100px;
}