Удалить повторяющиеся строки   •   Online-инструменты
4 115 просм
1 комм
Поделиться:

Кроссбраузерный значок рубля на CSS

Как известно из различных источников, в недалеком 2013-м году рубль, как и многие другие валюты, обзавелся собственным символом.

Кроссбраузерный значок рубля на CSS

Знак рубля уже внедрили в некоторые шрифты и в HTML-разметку. В HTML, кстати говоря, код символа:

₽ 

или

₽ 

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

Кроссбраузерный значок рубля на CSS

И такая картина может быть у большинства ваших клиентов. А исправлять это нужно как можно скорее, ведь без присутствия соответствующего знака валюты мы вводим в заблуждение ваших покупателей и, тем самым, теряем драгоценных клиентов.

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

1. Итак, первое, что нам необходимо сделать, это обернуть нашу букву в тег span:

<span class="rub">Р</span>

2. Затем напишем для нее небольшой стиль:

.rub { 
	line-height: 5px;
	width: 0.4em;
	border-bottom: 1px solid #000; 
	display: inline-block;
} 

Сохраняем и смотрим, что у нас получилось:

Кроссбраузерный значок рубля на CSS

По-моему – очень неплохо. По желанию можете изменить размеры горизонтальной полосы, ее цвет и положение относительно буквы «Р».

1
комментарий
стас
21.06 в 11:53
Такой вариант кросбраузернее

.rub{
font-size:inherit;
margin:0 2px;
color:inherit;
position:relative;
}

.rub:after{
content:"";
position:absolute;
display:inline-block;
width:80%;
height:8%;
top:auto;
bottom:25%;
left:-5%;
background:blue;
}
  • 1
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария