JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="ruble ruble--fake">Р</div>
<div class="ruble">₽</div>
<div>
  Price: 400 <div class="ruble ruble--small ruble--fake">Р</div> 
  <hr>
  Price: 400 <div class="ruble ruble--small">₽</div>
<hr>
<div class="ruble ruble--fake ruble--medium">Р</div>
<div class="ruble ruble--medium">₽</div>
<hr>
<div class="ruble ruble--fake ruble--small">Р</div>
<div class="ruble ruble--small">₽</div>

CSS

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
}

.ruble {
  font-family: sans-serif;
  text-align: center;
  margin: 20px;
  display: inline-block;
  vertical-align: text-bottom;
  font-size: 60px;
  line-height: 1;
}

.ruble--medium {
  font-size: 24px;
}

.ruble--small {
  font-size: 16px;
}

.ruble--fake {
  position: relative;
  overflow: hidden;
  color: #f00;
}

.ruble--fake:after {
  content: '–';
  left: -.05em;
  top: .08em;
  position: absolute;
}

.ruble--fake:before {
  content: '–';
  left: -.15em;
  top: -.076em;
  position: absolute;
}

div .ruble {
  margin: 0;
}