JavaScriptで擬似要素にCSSを適用させたい

実現したいこと

HTMLにて目次を作成しています。
目次の文字列と、ページ番号が重なる部分だけ、ページ番号をtransformで縮小かけて見た目を整えたいです。
※ページ番号は位置を右端揃えとするために擬似要素を使っています。

実現イメージです。

再現環境等

再現環境：vivliostyle cli のpreviewコマンドで表示

※vivliostyleでpreviewを実行して、sample.htmlを読込む
①htmlの内容が読み込まれ、cssが適用されて目次体裁が出来上がる。
⇒javascriptにて目次文字列とページ番号から重なるpタグに対してクラス名を追加
⇒javascriptでpタグに追加したクラス名で擬似要素：afterに対して、transformにてページ番号を縮小かける

②目次の文字列とページ番号が重なる段落は、ページ番号が縮小される。
⇒ページ番号が縮小される対象のpタグには追加したクラス名が入っているが、表示されたページ番号にはtransformが適用されていない。

発生している問題

cssで目次体裁を整えてから、javascriptにて目次文字列とページ数を取得して重なった部分に対して擬似要素のページ番号を縮小させるためのクラスを追加しました。
目次すべてをチェック後に、https://teratail.com/questions/101337を参考にCSSコードを<style>で<head>に直接挿入するJavaScriptを作成しましたが、擬似要素であるページ番号の部分が縮小されません。

headにはstyleが追加されていますが、以下のようにページ番号にはcssが適用されません。

ソース

html
1<html>
2<head>
3<meta charset="utf-8">
4<title>目次</title>
5<link rel="stylesheet" href="./css/mokuji_default.css">
6<link rel="stylesheet" href="./css/syomei.css">
7<link rel="stylesheet" href="./css/template_a5_h38.css">
8<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
9<script type="text/javascript" src="js/script.js" defer></script>
10</head>
11<body>
12<h1>目次</h1>
13<div>
14<p class="mokuji" data-hou-cd="H325901010029" data-nombre="000000の00000の00000"><span class="hyoudai jourei">〇ああああああああ</span><span class="hatsurei">（いいいいいいいいいいいいいいいいい）</span></p>
15<p class="mokuji afure2" data-hou-cd="H421902100032" data-nombre="000000の00000の00000"><span class="hyoudai">〇あああああああああああああ</span><span class="hatsurei">（いいいいいいいいいいいいいいいい）</span></p>
16<p class="mokuji" data-hou-cd="H333909220004" data-nombre="000000の00000の00000"><span class="hyoudai">〇あああああああああああああああああああ</span><span class="hatsurei">（いいいいいいいいいいいいいいいいいい）</span></p>
17<p class="mokuji afure1" data-hou-cd="H334902210011" data-nombre="000000の00000の00000"><span class="hyoudai">〇あああああああああ</span><span class="hatsurei">（いいいいいいいいいいいいいいいいいいい）</span></p>
18</div>
19
20</body>
21</html>
22

css
1@charset "UTF-8";
2html {
3  /* フォントの指定 */
4  font-weight: normal;
5  font-family: "mincho";
6  widows: 1;
7  orphans: 1;
8  text-size-adjust: none;
9}
10
11/* フォント明朝 */
12.font-mincho {
13  font-family: "mincho";
14}
15
16/* フォントゴシック */
17.font-gothic {
18  font-family: "gothic";
19}
20
21/* フォント欧文明朝 */
22.font-latin-mincho {
23  text-orientation: sideways;
24}
25
26/* フォント欧文明朝イタリック */
27.font-latin-mincho-italic {
28  font-style: italic;
29  text-orientation: sideways;
30}
31
32/* 目次作成用 */
33h1 {
34  font-size: 2rem;
35  inline-size: 5em;
36  padding: 0;
37  margin: 0;
38  margin-block-start: 2rem;
39  margin-block-end: 4rem;
40  margin-inline-start: auto;
41  margin-inline-end: auto;
42  text-align-last: justify;
43}
44
45/* 見出し */
46.mokuji_header_lv1 {
47  font-size: 1.75rem;
48  text-indent: -4em;
49  padding: 0;
50  margin: 0;
51  padding-inline-start: 5em;
52  margin-block-start: 4rem;
53  margin-block-end: 3rem;
54  break-after: avoid;
55}
56
57.mokuji_header_lv2 {
58  font-size: 1.5rem;
59  text-indent: -4em;
60  padding: 0;
61  margin: 0;
62  padding-inline-start: 6em;
63  margin-block-start: 4rem;
64  margin-block-end: 3rem;
65  break-after: avoid;
66}
67
68.mokuji_header_lv3 {
69  font-size: 1.25rem;
70  text-indent: -4em;
71  padding: 0;
72  margin: 0;
73  padding-inline-start: 7em;
74  margin-block-start: 4rem;
75  margin-block-end: 3rem;
76  break-after: avoid;
77}
78
79.mokuji_header_lv4 {
80  font-size: 1.25rem;
81  text-indent: -4em;
82  padding: 0;
83  margin: 0;
84  padding-inline-start: 8em;
85  margin-block-start: 4rem;
86  margin-block-end: 3rem;
87  break-after: avoid;
88}
89
90.mokuji_header_lv5 {
91  font-size: 1.25rem;
92  text-indent: -4em;
93  padding: 0;
94  margin: 0;
95  padding-inline-start: 9em;
96  margin-block-start: 4rem;
97  margin-block-end: 3rem;
98  break-after: avoid;
99}
100
101/* 目次情報 */
102p.mokuji {
103  text-indent: -1rem;
104  margin: 0;
105  padding-inline-start: 1rem;
106  padding-inline-end: 8rem;
107  position: relative;
108}
109p.mokuji::after {
110  position: absolute;
111  content: attr(data-nombre);
112  display: block;
113  padding-inline-end: 1rem;
114  inset-block-end: 0;
115  inset-inline-end: 0;
116}
117
118/* ゴシック */
119.header_num, .jourei {
120  font-family: "gothic";
121}
122
123/* 体系情報の名称字取り */
124.header_jidori {
125  text-indent: 0;
126  padding: 0;
127  margin: 0;
128  inline-size: 5em;
129  display: inline-block;
130  text-align-last: justify;
131}
132

css2
1@charset "UTF-8";
2@font-face {
3  font-family: "mincho";
4  src: local("Noto Serif JP"), local("IPAMincho"), local("IPA明朝"), local("ＭＳ 明朝");
5  font-weight: normal;
6}
7@font-face {
8  font-family: "gothic";
9  src: local("Noto Sans JP"), local("IPAGothic"), local("IPAゴシック"), local("ＭＳ ゴシック");
10  font-weight: bold;
11}/*# sourceMappingURL=syomei.css.map */

css３
1@charset "UTF-8";
2html {
3  font-size: 2.75mm;
4  line-height: 4.75mm;
5  writing-mode: horizontal-tb;
6  text-orientation: upright;
7}
8
9/* フォントサイズ大 */
10.font-size-large {
11  font-size: 4.125mm;
12}
13
14/* フォントサイズ小 */
15.font-size-small {
16  font-size: 2.0625mm;
17}
18
19/*用紙設定*/
20@page {
21  size: 148mm 210mm;
22}
23@-epubx-page-template {
24  @-epubx-page-master {
25    -epubx-utilization: 1.3;
26    /* 本文領域 */
27    @-epubx-partition {
28      -epubx-flow-from: body;
29      -epubx-enabled: -epubx-expr( page-number % 2 == 0 );
30      left: 20.68mm;
31      top: 21mm;
32      width: 109.32mm;
33      height: 170.6mm;
34      writing-mode: horizontal-tb;
35      overflow: visible;
36      position: absolute;
37      /*段数*/
38      column-count: 1;
39      /*段間*/
40      column-gap: 5.5mm;
41      /*罫線*/
42      column-rule: solid 0.15mm #000;
43      column-fill: auto;
44      /* debug用の枠表示 */
45      border: dashed 1px;
46    }
47    /* 本文領域 */
48    @-epubx-partition {
49      -epubx-flow-from: body;
50      -epubx-enabled: -epubx-expr( page-number % 2 == 1 );
51      left: 18mm;
52      top: 21mm;
53      width: 109.32mm;
54      height: 170.6mm;
55      writing-mode: horizontal-tb;
56      overflow: visible;
57      position: absolute;
58      /*段数*/
59      column-count: 1;
60      /*段間*/
61      column-gap: 5.5mm;
62      /*罫線*/
63      column-rule: solid 0.15mm #000;
64      column-fill: auto;
65      /* debug用の枠表示 */
66      border: dashed 1px;
67    }
68  }
69}
70/* A5 横書き 1段 11q 38字 38行 テンプレート（h38）*//*# sourceMappingURL=template_a5_h38.css.map */

javascript
1
2var i =1;
3var classnode = document.getElementsByClassName('mokuji');
4
5Array.prototype.forEach.call(classnode, element => {
6
7  /* ページ跨ぎのデータを取り除く */
8	if (element.children.length == 3) {
9
10    /* 目次テキストとノンブルを取得*/
11		var mokuji_text = (element.children[0].innerText + element.children[1].innerText).length;
12		var nombre = (element.children[2].innerText).length;
13
14		/* 目次文字列とノンブルの重なりを判定 */
15    var num = mokuji_text - nombre;
16
17		if (num == 13) {
18			element.classList.add('afure1');
19		}
20
21	}
22
23})
24
25let style = `<style>
26p.afure1[data-nombre]::after {
27  transform: translateX(0.2rem) scale(0.5, 1);
28}
29</style>`;
30
31document.querySelector(`head`).insertAdjacentHTML('beforeend', style);
32

yambejp

2022/07/05 03:16

疑似要素がマストなのでしょうか？

wkbsyt

2022/07/05 04:09

ページ番号を右端揃えにすることができるのであれば擬似要素がマストではありませんが、今の見た目を作る中で擬似要素を使うことでページ番号を揃えることができました。擬似要素を使わず、このページ番号の見た目にする方法があればご教授いただきたいです。

Lhankor_Mhy

2022/07/05 04:47

ご提示のコードを試してみましたが、問題が再現しませんでした。おそらく、ご提示の部分には原因はなさそうに思います。ご提示いただいていない部分に原因があるか、問題の共有が上手くできていないと思います。問題再現の手順をもう少し詳しく書いていただけますか？

wkbsyt

2022/07/05 05:41

再現環境等を追加させていただきました。 vivliostyle cli というcss組版のossを使っております。

Lhankor_Mhy

2022/07/05 06:03

アンテナハウスのやつですね。 teratail の回答者に使ったことある人いるのかな……？問題が再現するページを提示することはできますか？

Lhankor_Mhy

2022/07/05 06:06

あ、もしかして、出力結果は ePub ですか？ ePub 上でスクリプトを実行することってできたんでしたっけ？　そのあたり全然知識がないので、そうだとしたらお役には立てなさそうですね。

wkbsyt

2022/07/06 00:04

ありがとうございます。再度現状のjavascriptを見直したところ、transformで縮小、位置修正が出来ました。

行動規範の内容に同意します

回答1件

自己解決

現状のjavascriptを見直して、以下の記述により解決方法が分かりました。

element.children[2].style.transform = "translateX(0.25rem) scale(0.9, 1)";

javascript
1var i =1;
2var classnode = document.getElementsByClassName('mokuji');
3
4Array.prototype.forEach.call(classnode, element => {
5
6  /* ページ跨ぎのデータを取り除く */
7	if (element.children.length == 3) {
8
9    /* 目次テキストとノンブルを取得*/
10		var mokuji_text = (element.children[0].innerText + element.children[1].innerText).length;
11		var nombre = (element.children[2].innerText).length;
12
13		/* 目次文字列とノンブルの重なりを判定 */
14    var num = mokuji_text - nombre;
15
16		if (num == 13) {
17                   // ** このように記述することで擬似要素に対してtransform が適用されました。**
18                    element.children[2].style.transform = "translateX(0.25rem) scale(0.9, 1)";
19		}
20
21	}
22
23})
24