Нещодавно я займався стилями для "коротких історій" на моєму особистому сайті, який я вирішив переробити, перейшовши з WordPress на Octopress і GitHub—пост про цей досвід скоро!

У будь-якому випадку, короткі історії мають тенденцію бути довгими (як і пости в блогах), тому я хотів надати авторам легкий спосіб включити емфатичні, семантичні розділи розділів. Скромна горизонтальна лінія <hr> здавалася правильним рішенням, тим більше, що Markdown робить їх такими легкими для включення—просто додайте *** на новому рядку.

Більшість браузерів відображають тег <hr> як вставну рамку—фактично темна лінія, накладена безпосередньо на світлішу лінію. Але це так ж цікаво, як одна з двохгодинних лекцій Ари про історію та переваги вітрових брифів у сільській Алясці.

Тож я досліджував інтернет у пошуках сексуальніших рішень і натрапив на надто знайомий сайт: CSS Tricks Кріса Койєра.

Слід зауважити: оскільки ці стилі спираються на псевдоелементи :after і :before, IE7 і нижче не надто добре їх відображають. Отже, вам, можливо, доведеться трохи повозитися з IE-специфічними стилями. Або ви можете вирішити зайнятися чимось більш цінним для свого часу.