見出しに雲のもくもくのようなことをつけたい

Question

下記の画像のようなことをCSSで実現したいのですが、文字数によって丸の数が変わるようにしたいのですが、どのようなCSSを使用すれば可能でしょうか？

▽ソース

<h3 class="tit">テキスト</h3>

上記で文字数によって丸の数を自動で変えたい

よろしくお願いします。

Comments

[m.ts10806]

「CSS 雲」で出てくる検索結果では何が足りませんか？ご自身のやってみたことと同時に調べた内容もご提示ください（丸投げは非推奨です）

Answer 1

一文字ずつをspanタグで囲って丸くcssを適用させる…とかでしょうか。中の文字が変動するのであれば、javascriptかjqueryでの処理が必要になるかもしれません。

また丸い見出しするデザイン的な理由はあるのでしょうか。もし装飾することが目的であれば、他の見出しを検討してみるのがいいかもしれません。
他のcssの見出しの装飾方法については、こちらのサイトが詳しくて参考になると思いますよ！
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
CSSで作る！吹き出しデザインのサンプル19選

Comments

[dw_sasaki]

回答ありがとうございます。
やはりspanで囲っていくのが一番簡単ですね...
やわらかい雰囲気にしたいので画像のようなデザインになっています。
参考サイトありがとうございますたくさんあって参考になります。
一度spanでやってみて難しければ参考サイトの分を試してみようと思います。
ありがとうございました！