質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

324閲覧

擬似要素のcontent内に記載する数字を増やして表示したい

java

総合スコア2

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/02/06 07:44

編集2023/02/06 07:47

実現したいこと

・擬似要素contentに記載する数字を増やしたい

前提

現在サイトのコーディングを行なっています。フロントエンドの中でjavascriptの知識が足りず勉強中のため、
お力お借りさせていただけないかと思い質問させていただきます。
添付写真のように数字を01→02→03と増やして表示したいのですが、javascriptを使用してこのように表示することは可能なのでしょうか。
もし可能であれば、方法をご教示いただきたく存じます。
宜しくお願いいたします。
イメージ説明

該当のソースコード

html

1 <div class="service__dx__service-flow"> 2 <div class="service__dx__service-flow__wrap"> 3 <h4> 4 テキスト 5 </h4> 6 <p> 7 テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります 8 テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります 9 </p> 10 </div> 11 </div> 12 <div class="service__dx__service-flow__arrow"> 13 <img src="<?php echo get_template_directory_uri();?>/images/dx_appli_arrow.png"> 14 </div> 15 <div class="service__dx__service-flow numver"> 16 <div class="service__dx__service-flow__wrap"> 17 <h4> 18 テキスト 19 </h4> 20 <p> 21 テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります 22 テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります 23 </p> 24 </div> 25 </div> 26 <div class="service__dx__service-flow__arrow"> 27 <img src="<?php echo get_template_directory_uri();?>/images/dx_appli_arrow.png"> 28 </div> 29 <div class="service__dx__service-flow"> 30 <div class="service__dx__service-flow__wrap"> 31 <h4> 32 テキスト 33 </h4> 34 <p> 35 テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります 36 テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります 37 </p> 38 </div> 39 </div>

css

1.service__dx__service-flow{ 2 position: relative; 3 padding: 24px 0; 4 text-align: right; 5 background-color: #fff; 6 border-radius: 10px; 7 box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 5%); 8} 9 10.service__dx__service-flow::before { 11 content: ""; 12 position: absolute; 13 width: 100px; 14 height: 100px; 15 top: 0; 16 left: 0; 17 border-radius: 10px 0 0 0; 18 background: orange; 19 clip-path: polygon(0% 0%, 0% 100%, 100% 0%); 20 box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 5%); 21 z-index: 100; 22} 23 24.service__dx__service-flow::after { 25 content: "01"; 26 display: block; 27 position: absolute; 28 top: 0; 29 left: 3px; 30 color: #fff; 31 font-size: 4rem; 32 z-index: 101; 33} 34 35.service__dx__service-flow__wrap{ 36 width: 80%; 37 margin-left: 15%; 38 text-align: left; 39} 40 41.service__dx__service-flow__wrap h4{ 42 font-size: 2rem; 43 margin-bottom: 5px; 44} 45 46.service__dx__service-flow__arrow{ 47 width: 10%; 48 margin: 0 auto; 49}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

CSS の counter() 関数で可能です。JavaScript は必要ありません。

投稿2023/02/06 07:49

int32_t

総合スコア20514

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

java

2023/02/06 08:15

ありがとうございます!無事解決できました。大変勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。