Знак рубля на скорую руку
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
), чтобы она чуточку выдавалась за левый край буквы и не липла к ее низу или середине.