Ett sätt är att emulera effekten med en brakgrundsbild
Kod:
div.divider { background: url(../graphics/dots.png) 0% 100% repeat-x; }
Jag förespråkar användandet av en div avgränsare istället för HR, åtminstone om alternativet för att uppnå samma effekt är att wrappa in HR i en div. HR är ett relativt osemantiskt element. Det kan grupperas med andra visuella element som bold och italic. Det beskriver egentligen bara hur det ser ut, inte funktion eller innehåll.
Ditt andra exempel blir helt klart krångligare. Ett tips kan vara en wrapper för texten, sätt på en liten padding för ditt listitem-element (li) och använd en bakgrundbild som är 2 x 2 px varannan grå, varannan vit. Lite svårt att förklara men jag hoppas du förstår. Om inte annat vispar jag ihop ett exempel när jag kommer hem ikväll.