HTMLとCSSでテキスト内の数字を丸で囲む

HTMLとCSSの記述だけで、テキスト内に記載された数字を丸で囲み、色付けをする。

ツリービューで手順を説明する記事のような、項番を活かしたい時に便利。

完成見本：これは見本1です。

数字を丸で囲むCSS

 p.circle code {
  display: inline-block;
  height:25x;
  width:25px;
  border-radius:50%;
  line-height:25px;
  text-align:center;
  background-color: #BF573F;
  color: #fff;
  margin-left: 4px;
  margin-right: 4px;
 }

ポイント

ポイントは2行目。

WordPressのcodeはインライン要素なので、display: inline-block;を指定する。

使い方

冒頭で提示した見本ですが、

完成見本：これは見本1です。

HTMLソースは以下のようになっている。

<p class="circle">
  完成見本：これは見本<code>1</code>です。
</p>

<code>～</code>に挟まれた要素にスタイルが適用される。要素の文字数が多いと崩れるので、数字は２桁までがちょうどよい。

完成見本：これは見本10です。