-
投稿者投稿
-
2025年11月3日 9:38 AM #146732
【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】クローム
【当該サイトのURL】### 実現したいこと
添付した画像のようにStepの数字の上に文字を入れたい
### 発生している問題
### 試したこと
scssディレクトリを作ってつけそうなクラスに
&::afterにcontent:”〇〇”;を書いたけどアイコンの中に出て
positionとtopやbottomをやったがアイコンの外にはでてくれなかった。
♥ 0Who liked: No user2025年11月4日 2:14 PM #146734.smb-step__item__numberがoverflow: hiddenだからですかね?
いずれにしろ、丸の中にアイコンが入っていたりなどもありますし、ステップブロック + CSS でやるのは結構きつそうな気がします…。♥ 0Who liked: No user2025年11月4日 3:14 PM #146737返信ありがとうございます。
ステップブロックでは難しいなら、どうやれば画像のようにアイコンの上に文字がでるのでしょうか?
♥ 0Who liked: No user2025年11月4日 4:02 PM #146739.smb-step__item__numberがoverflow: hiddenだからですかね?これ確認されましたか?
一応、僕の環境ではこんな感じで丸の上側に「point」と表示できました。.smb-step__item__number { overflow: visible; } .smb-step__item__number::after { position: absolute; inset: auto auto 100%; content: 'point'; color: red; }ステップブロックをカスタマイズしても実現できない場合、ステップブロック以外でやる場合は、
– カスタム HTML ブロックを使ってコーディングする
– グリッドブロック、フレックスブロック、グループブロックに追加 CSS クラスを設定して CSS で頑張る
– 独自ブロックを作るが基本的なやり方かなと思います。
—
あと、バージョン情報が未記入だったので、次回からは記載をお願いします。同じ問題に直面した人が見たときの助けになりますので。
2025年11月6日 7:05 PM #146772 -
投稿者投稿
- トピック「Stepの数字の上に文字を入れたい」には新しい返信をつけることはできません。
