Кнопка на основе тега A без внутреннего SPAN

Весь интернет заполнен статьями как сделать расширяемую по длине кнопку
на основе CSS спрайтов.

Но все они используют дополнительный <span/> внутри тега <a>.
Это некрасиво и семантически неправильно.
Нужно сделать кнопку не используя JavaScript и доп. элементы.


Хотелось видеть такой простейший HTML:

<a href="javascript: alert('Привет!')" class="button">Нажми меня</a>

После долгой борьбы оказалось это возможно!
Для Mozilla Firefox, Chrome, Opera — используется .button:after CSS селектор.
Для IE6,7: HTC файл который добавляет SPAN и классы в элемент кнопки.

Вот пример

Проверено в браузерах: IE6, IE7, Firefox 3, Chromium 2.0.177.0 (14598), Opera 9.64.

Недостатки:

• CSS не валидируется
• В IE если много кнопок то может «мигнуть» стилем по умолчанию при загрузке.
• Не будет работать в Firefox 2 — в нем не поддерживается inline-block. Это в принципе решаемо.