Знак рубля на скорую руку

22 мая 2012 г.

На настоящий момент все современные браузеры поддерживают CSS-псевдокласс ::after, чем мы и воспользуемся для создания знака рубля минимальными усилиями. В HTML достаточно одного элемента с русской «Р»:

<span class=rouble>Р</span>

Класс rouble задает стиль, пририсовывающий палку:

<style>
  span.rouble { font: 48px Arial; }
  span.rouble::after { content: '–'; position: absolute; margin: 5px 0 0 -0.65em; }
</style>

На выходе получаем такое:

В роли палки выступает короткое тире (– или Alt+0150).

Плюсы: минимум кода, никакой графики и левых шрифтов, в буфер копируется только «Р».

Минус: для разных размеров шрифта, и тем более для разных шрифтов нужно менять отступ палки (margin), чтобы она чуточку выдавалась за левый край буквы и не липла к ее низу или середине.

Метки: CSS