Иногда может возникнуть ситуация, когда на странице HTML, по каким-то причинам, не должен присутствовать символ доллара ($). По идее, он относится к категории специальных символов в некоторых случаях может мешать.

Вначале рассмотрим стандартные способы.

1. При помощи специальных символов

Это - мнемоники $ $ U+0024 (юникод). Их использование поддерживается подавляющим большинством браузеров, даже сравнительно устаревших.В результате браузер отобразит символ $.

Но, можно использовать и иные способы, позволяющие некоторое разнообразие. Для этого потребуется использовать CSS.

2. При помощи CSS

Идея: комбинируем вместе символы заглавной латинской S и символа |.

Первый способ:

<style>
.flip1{display: inline-block;  color:red; position: relative; font-family: Arial, Serif }
.flip1:before {content: "|"; display: inline-block; position: absolute; left: 30%; top: -8%}
</style>

Demo1:<span class='flip1'>S</span>

Вот что получится: Demo1:S

Т.е. на символ S наложилась вертикальная черта.

Второй способ:

<style>

.flip2{ display: inline-block;  color:green; position: relative; font-family: Arial, Serif  }
.flip2:before {content: ""; border: 0.4px solid; display: inline-block; position: absolute; left: 44%; top: 14%; height: 70%;}
</style>

Demo2:<span class='flip2'>S</span>

Вот что получится: Demo2:S

Этот способ основан на использовании div-а с определенной шириной границы вместо вертикальной черты |. Обратим внимание, что используются дробные значения для толщины границы. Но, такие значения, как правило, поддерживаются браузерами. Впрочем, можно было бы использовать, скажем, только левую границу и задать для нее толщину 1px, тогда можно обойтись и без дробных значений.

Третий способ:

<style>

.flip3{ display: inline-block;  color:blue; position: relative; font-family: Serif  }
.flip3:before {content: ""; border: 0; width: 0.6px; background: linear-gradient(goldenrod, yellow, darkcyan);  display: inline-block; position: absolute; left: 44%; top: 15%; height: 70%;}

</style>

Demo3:<span class='flip3'>S</span>

Вот что получится: Demo3:S

Способ основан на использовании div-а шириной 0.6px и с нулевой толщиной границы. Положение этого div-а подобрано экспериментально и регулируется параметрами - такими свойствами CSS, как left, top, height, width.

Данный пример позволяет сделать, например, градиент или иное форматирование внешнего вида вертикальной черты.