1

I would like to use CSS to change the appearance of the <hr> elements on a page: instead of a horizontal line, I'd like each one to appear as a set of three asterisks. I can accomplish that using something like this:

hr {
    border: none;
    margin: 3.0rem auto;
    width: 5rem;
}

hr:before {
    content: "***";
    letter-spacing: 1rem;
}

(Fiddle here.)

The problem is getting this generated content to appear horizontally centered. I can get it more-or-less centered by tweaking the "width" property of the <hr>, but this feels hacky and inflexible. Is there a way to tell the browser that this content should be centered?

2 Answers 2

3

How about this,

hr {
    border: none;
    margin: 2.0rem auto;
    text-align:center;
}

hr:before {
    content: "***";
    letter-spacing: 1rem;
}

http://jsfiddle.net/rMNSJ/2/

3

Remove the width property and add text-align:center; to the hr rule:

hr {
    border: none;
    margin: 2.0rem auto;
    text-align:center;
}

jsFiddle example

3
  • This indicates nicely a) that that is still not centered, and b) why that is still not centered
    – Eric
    Jun 17, 2013 at 14:33
  • @Eric - the text-align property doesn't have anything to do with what you're pointing out. That would be a problem due to the letter-spacing property.
    – j08691
    Jun 17, 2013 at 14:44
  • @Eric The problem you mention can be mitigated by setting the padding-left of the generated content equal to the letter-spacing.
    – bdesham
    Jun 17, 2013 at 19:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.