Question

I don’t get it. I want a simple line with arrow so I use a class with border and a background-image:

hr {
    padding-top: 10px;
    border: none;
    border-top:dotted #000 1px;
    background: #fff url("img/arrow.gif") no-repeat 100px -1px;
 }

Unfortunately the background is below the border:

I’ve tried z-index, “id beats class” (with <hr id="arrow">) but nothing worked. Is there a solution?

BTW, how the css-cracks would do such a dotted line with arrow?

Answer 1

​EDIT: I’ve been looking at doing this without :after, only because I don’t like being downvoted 🙂

The best I can come up with is this:

.box3 {
    z-index: 100;
    border: none;
    padding: 10px 0 30px 0;    
    background-image: url("http://test.mark-design.co.uk/4ik4e7ic.png"), url('http://test.mark-design.co.uk/line.png');
    background-position: 50% -1px, left top;
    background-repeat: no-repeat, repeat-x;
}

It uses the multiple backgrounds in CSS3 so it won’t be massively supported yet but works and is a fairly interesting way of doing it – http://jsfiddle.net/spacebeers/T8Yzj/39/

The image needs tweaking as does the padding but the result is sound.