Евгений, вот так:

<style>
  .smallcapitals {
    font-size: .875em;
    letter-spacing: .15em;
    margin-right: -.15em;
  }
</style>

<p><span class="smallcapitals">СССР</span>
  — Союз Советских Социалистических Республик.</p>

СССР — Союз Советских Социалистических Республик.

Чтобы не заканчивать совет так быстро, позволю себе лирическое отступление. Вы легко бы ответили на свой вопрос самостоятельно, проинспектировав элемент в любом современном браузере. Кухня верстальщика всегда на виду.

Браузеры не прячут исходный код — каждый желающий может разобраться, что и как работает, даже если код обфусцирован. Угадать же последовательность действий, например, техдизайнера, повара, серверного программиста или звукорежиссёра совсем не просто, тут без «как это сделано?» не обойтись.

До появления веб-инспектора в каждом браузере было не всегда просто определить связь между разметкой, стилями и скриптами. Теперь же это не составляет никакого труда:

Конечно, веб-инспектор не всегда помогает — бывает видишь код, понимаешь, как он работает, но не понимаешь почему сделано иммено так, а не иначе. В таких случаях помогает общение с автором или коллегами.

Возвращаясь к реализации маленьких прописных на нашем сайте, я бы хотел обратить внимание на правый отрицательный margin. Свойство letter-spacing увеличивает или уменьшает межбуквенный интервал, добавляя отступ справа от каждого символа. Чтобы пробел после .smallcapitals не увеличился, нужно отменить отступ для последнего символа:

.smallcapitals {
  font-size: .875em;
  letter-spacing: .15em;
  margin-right: -.15em;
}

В случае с уменьшенным интервалом, компенсирующий margin будет, наоборот, положительным:

.thinner {
  letter-spacing: -.25em;
  margin-right: .25em;
}