CSSについて教えてください。 こちらのサイトを参考にしているのですが、ナンバーを自動で付けているの

CSSについて教えてください。
こちらのサイトを参考にしているのですが、ナンバーを自動で付けているのを解除して、ナンバーではなく直接任意のテキストを表示したいです。
spanに入れただけだと白枠の中に表示されてしまうのですが、どうすれば良いかご教授いただけないでしょうか。

画像の上に要素を重ねるレイアウトの実装方法
https://tips-log.com/css-layout/

（コード貼り付けようとしたのですが文字数が足りませんでした）

<span class="p-textImgBox__number"></span>


.p-textImgBox__number::before {
position: absolute;
font-size: 70px;
letter-spacing: 0.1em;
line-height: calc(84/70);
color: var(--base-color);
right: 25px;
font-weight: 100;
content: "0"counter(number) " ";
top: 0;
}

content: "0"counter(number) " ";
を消せばいけるかと思いましたが、ダメでした…。

No.3 ベストアンサー 回答者： ssawatake 回答日時： 2024/04/19 19:18

htmlで指定した文字列を渡したいんでしょ？

以下にします。例です。
【css側】
content: "0"counter(number) " ";
↓
content: attr(kahendata);　←kahendataにhtmlから渡す

【html側】
<span class="p-textImgBox"></span>
↓
<span class="p-textImgBox__number" kahendata="ここに渡す文字"></span>

この回答へのお礼

わわわ！ありがとうございます！
attrでHTMLから取得するんですね！
これならわかりやすいし管理も楽ですね！
とても勉強になりました！

お礼日時：2024/04/19 20:46

No.2 回答者： wanderer1 回答日時： 2024/04/19 19:11

contentを使って違うテキストを表示する場合は、それぞれのブロックに「もうひとつクラス」をつけてやるとよいです。

上記の例なら

p-textImgBox__number::before

の指定がすべてについてると思うんですけれど、

<span class="p-textImgBox__number hoge1"></span>
<span class="p-textImgBox__number hoge2"></span>

と半角スペース+追加クラス名をつける。

で、p-textImgBox__number::beforeからはcontentの一行だけ外して。

.p-textImgBox__number.hoge1::before {content:”任意の”}
.p-textImgBox__number.hoge2::before {content:”テキスト”}

というふうに、hogeに対応する部分だけをCSSファイルに追記するといいんじゃないかなー、と思います。


p-textImgBox__number::before {}よりも下の行に

.p-textImgBox__number.hoge1::before {content:”任意の”}
.p-textImgBox__number.hoge2::before {content:”テキスト”}

を追記します。


CSSの書き方ってわりと幅が広いので、それも覚えていただければ。

ただ上記のような書き方って面倒なので、わかってる人はなんとか自動化できんのか？ と考え始めるみたいです。

この回答へのお礼

ありがとうございます！
Chrome分けてできました！
確かに数が増えたときに大変だから自動化とか色々考えないとですね…勉強します！

お礼日時：2024/04/19 20:43

No.1 回答者： wanderer1 回答日時： 2024/04/19 17:55

別の箇所で counter-increment の設定などが生きてませんか？

カウンターについてはこちら↓
ここでカウンター関係のCSSを探してコメントアウトしてみてください。


https://developer.mozilla.org/ja/docs/Web/CSS/CS …

https://developer.mozilla.org/ja/docs/Web/CSS/co …



content: "0"counter(number) " ";

は、数字のゼロを自動でつけて、かつ、カウンターのナンバーも表示してね、という指定です。

content: "0"
これが0をつける

counter(number) " ";
これがカウンターの数字

任意のテキストをCSSでつけるだけなら

content:"任意の文字";

って試してみたら、参考にされたページのカウンターまわりの仕組みがどうなってるか、なんとなくわかるんじゃないかなーと思います。

この回答へのお礼

ありがとうございます！！！ご指摘の通りでした！
ただ今度は、content:"任意の文字";をすると、他のところも同じ文字になるので、どうしたもんかと悩んでいます…。

お礼日時：2024/04/19 18:08