[shinya]

【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】

クローム
【当該サイトのURL】

### 実現したいこと

添付した画像のようにStepの数字の上に文字を入れたい

### 発生している問題

### 試したこと

scssディレクトリを作ってつけそうなクラスに
&::afterにcontent:”〇〇”;を書いたけどアイコンの中に出て
positionとtopやbottomをやったがアイコンの外にはでてくれなかった。

♥ 0

Who liked: No user

[キタジマ タカシ]

.smb-step__item__number が overflow: hidden だからですかね？
いずれにしろ、丸の中にアイコンが入っていたりなどもありますし、ステップブロック + CSS でやるのは結構きつそうな気がします…。

♥ 0

Who liked: No user

[shinya]

返信ありがとうございます。

ステップブロックでは難しいなら、どうやれば画像のようにアイコンの上に文字がでるのでしょうか？

♥ 0

Who liked: No user

[キタジマ タカシ]

.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 で頑張る
– 独自ブロックを作る

が基本的なやり方かなと思います。

—

あと、バージョン情報が未記入だったので、次回からは記載をお願いします。同じ問題に直面した人が見たときの助けになりますので。

♥ 1

Who liked:

[shinya]

無事に思い通りの事がでしました。

ありがとうございました。

♥ 1

Who liked:

[投稿者]

投稿