CSS class定義ではなく、style直書きで同じものを作りたい

Question

前提・実現したいこと

現在class定義で動作しているものを、style=""に直書きして同じものを作ろうとしています
1がclass定義したものです
2がstyle直書きしてみたものです

1と同じものを2の書き方で再現したいのですが、うまく同じにできません
beforeとafter部分の書き方が間違ってるのかと思いますが、
分かる方いらっしゃいましたらよろしくお願いいたします

style直書き以外の回答は受け入れません

該当のソースコード

1

<style>
  body,html {
width:100%;
height:100%;
  }

  .block {
position: relative;
  }

  .block:before {
    content: "";
    position: absolute;
  }

  .block::after {
    content: "ラベル";
    position: absolute;
    font-weight: bold;
    color: #0082D2;

  }

  .block.top-right:before {
    top: 0;
    right: 0;
    border-bottom: 4.5em solid transparent;
    border-right: 4.5em solid #fff;
  }

  .block.top-right::after {
    top: 13px;
    right: 0;
    transform: rotate(45deg);
  }
</style>

<div style="width:50%;height:30%;border-radius:5px;background:red" class="block top-right"></div>

該当のソースコード

2

<style>
  body,html {
width:100%;
height:100%;
  }
</style>

<div style="width:50%;height:30%;border-radius:5px;position:relative;background:red">
<div style="position:absolute;top:0%;right:0%;transform: rotate(45deg);border-bottom: 4.5em solid transparent;border-right: 4.5em solid #fff;">
<div style="position:relative;top:13px;right:0;">ラベル</div>
</div>
</div>

Comments

[m.ts10806]

あえてそうする理由はなんでしょう。あと、表示上何がどう違ったのでしょう

[退会済みユーザー]

あえてする理由は動的にcontentの部分を書き換えたいからです
いずれJavaScriptでdivを生成し、content部分をinnerTextで動的に変更したいと考えております

表示上の違いは実行していただければわかりますが、表示位置が合いません

[退会済みユーザー]

classで定義してしまうとcontentの部分を書き換えることは不可能です
divを100個(個数は固定ではない)生成して、100個それぞれの内容でcontent書き換えできないと考えました

[m.ts10806]

質問本文に追記願います。

>classで定義してしまうとcontentの部分を書き換えることは不可能です

全体の構成分かりませんけど、class自体を動的に生成するか、変わるところだけstyle上書きしては？

[退会済みユーザー]

そのやり方もあるかと思いますが、より複雑になると思います
class定義せずHTMLで実現できたら、よりスマートになると考えました

[m.ts10806]

質問本文に追記願います。前提や経緯や背景は質問本文に必要です。
可能なら「html直書き以外の回答は受け入れません」と書いておいたほうが良いかもしれませんね。
こちらとしては「メンテナンス性や可読性も加味した提案」のつもりだったのですが、要らないようなので。

[m.ts10806]

インラインのみならタグは「HTML」必須ですね

Answer 1

classで定義してしまうとcontentの部分を書き換えることは不可能です

いえ、可能です。CSSの側でcontent: attr(data-xxx)のように書いておけば、あとからdata-xxx属性を書き換えることで中身を自由に設定できます（MDN）。

Answer 2

こんにちは。

誤解されているようですが、::before ::after 疑似要素は、その要素の子要素になります。ですので、元々の子要素やコンテンツとは兄弟要素になります。
つまり、イメージとしてはこんな構造です。

<div>
  <div>::before</div>
  <div>::after</div>
</div>

ところが、ご提示のコードはこのような構造になっています。

<div>
  <div>
    <div>ラベル</div>
  </div>
</div>

まずはそこからではないでしょうか。

Comments

[Lhankor_Mhy]

あ、終わってた。

Answer 3

::befor疑似要素と::after疑似要素は子要素になります。つまり２つは兄弟関係です。
style直書きのHTMLは２つが子要素と孫要素になってます。

あと、スタイルの設定箇所も間違っています。

<div style="width:50%;height:30%;border-radius:5px;position:relative;background:red">
  <div style="position:absolute;top:0;right:0;border-bottom: 4.5em solid transparent;border-right:4.5em solid #fff;">
  </div>
  <div style="position:absolute;top:13px;right:0;font-weight: bold;color:#0082D2;transform:rotate(45deg);">ラベル</div>
</div>