Create a perfect dashed line with background-image in CSS
I would like to have a dotted line below to a text : The web designer have designed a custom dotted so i can’t use : h2 { border-bottom: 4px dashed #fff; display:table; } because it is not conform. What i’ve done : I’ve made an image with a dot and position it with css : h2 { padding-bottom: 20px; display:table; background-image: url('../images/tiret.png'); background-repeat: repeat-x; background-position: center bottom; } It works very well but depending on the width of the text, the last dot could appear cut like you can see on this picture : Do you have a suggestion on how to avoid this ?