style=""直書きでbefore、afterは指定できませんか？

前提・実現したいこと

<div class="balloon" style="background-color: blue;width:85%;float:left"> style="background-color: blue;"で吹き出し本体の色は変える事はできたのですが、大きい丸の部分と小さい丸の部分の変え方がわかりません <style></style>でballoonを作りつつ、直書きで色だけ変えたいと思っております宜しくお願いいたします

該当のソースコード

CSS
1<style>
2body.html{
3width:100%;
4height:100%;
5}
6/* 吹き出し本体 */
7.balloon{
8  position: relative;
9  padding: 20px;
10  background-color: red;
11  border-radius: 30px;
12}
13/* 大きい丸 */
14.balloon::before{
15  content: '';
16  position: absolute;
17  display: block;
18  border-radius: 50%;
19  background-color: red;
20  left: -35px;
21  bottom: 15px;
22  width: 30px;
23  height: 30px;
24}
25/* 小さい丸 */
26.balloon::after{
27  content: '';
28  position: absolute;
29  display: block;
30  border-radius: 50%;
31  background-color: red;
32  left: -55px;
33  bottom: 10px;
34  width: 15px;
35  height: 15px;
36}
37</style>
38
39
40<div style="width:100%;height:20%;;display: flex;justify-content: bottom;align-items: center;">
41<div style="width:15%;height:100%;float:left">
42</div>
43<div class="balloon" style="background-color: blue;width:85%;float:left">
44hello
45</div>
46</div>
47

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

回答3件

ベストアンサー

疑似要素はstyle属性で直書きすることができません。
しかし、::before ::afterで作られる疑似要素を擬似的にではなく<div>で実態的に作れば同じ動作が期待できます。

html
1<div class="balloon" style="background-color:red; width:85%; float:left">
2  <div class="before-balloon" style="background-color:inherit;"></div>
3  hello
4  <div class="after-balloon" style="background-color:inherit;"></div>
5</div>

background-colorに設定されているinheritは「親要素のプロパティを継承する」という値ですので、バルーンの色を変えたいときはdiv.balloonのbackground-color:red;の部分だけ変更すれば大きい丸と小さい丸の色も同様に変更できます。

css
1/* 大きい丸 */
2.before-balloon{
3  content: '';
4  position: absolute;
5  display: block;
6  border-radius: 50%;
7  background-color: red;
8  left: -35px;
9  bottom: 15px;
10  width: 30px;
11  height: 30px;
12}
13/* 小さい丸 */
14.after-balloon{
15  content: '';
16  position: absolute;
17  display: block;
18  border-radius: 50%;
19  background-color: red;
20  left: -55px;
21  bottom: 10px;
22  width: 15px;
23  height: 15px;
24}

投稿2020/08/31 02:03

nelpesica

総合スコア159

疑似要素をインラインスタイルで書くことは出来ませんが、疑似要素の意味、効果を利用した代替手段はあります。
:after、:beforeの疑似要素をインラインスタイルで直接htmlに記述する方法（「疑似要素　インライン」などで検索すると他にも記事はヒットします）

が、そもそもインラインスタイルはあまりよろしくないと思います。

「大きい丸」「小さい丸」のクラスを別個に作れば良いのでは。

例えば（定義のみ・処理内容省略）

css
1.balloon.balloon-large::before{
2}
3.balloon.balloon-small::after{
4}

html
1<div class="balloon balloon-large"></div>
2
3<div class="balloon balloon-small"></div>
4

CSSフレームワークなどでも「共有処理」＋「個別サイズ・色の処理」でこのように定義しているものをよく見ます。

投稿2020/08/31 01:32

編集2020/08/31 01:39

m.ts10806

総合スコア80875

To change the color of the large and small circles in your balloon using inline styles, you can add the following CSS properties to the corresponding pseudo-elements in pizza tower


/* Change large circle color */
.balloon::before {
  background-color: blue;
}

/* Change small circle color */
.balloon::after {
  background-color: blue;
}

So your final code would look like this:

<style>
  body.html {
    width: 100%;
    height: 100%;
  }
  
  /* 吹き出し本体 */
  .balloon {
    position: relative;
    padding: 20px;
    background-color: red;
    border-radius: 30px;
  }
  
  /* 大きい丸 */
  .balloon::before {
    content: '';
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: red;
    left: -35px;
    bottom: 15px;
    width: 30px;
    height: 30px;
  }
  
  /* 小さい丸 */
  .balloon::after {
    content: '';
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: red;
    left: -55px;
    bottom: 10px;
    width: 15px;
    height: 15px;
  }
</style>

<div style="width:100%;height:20%;display:flex;justify-content:bottom;align-items:center;">
  <div style="width:15%;height:100%;float:left"></div>
  <div class="balloon" style="background-color: blue;width:85%;float:left">
    hello
  </div>
</div>

Note that you can replace "blue" with any valid CSS color value that you want to use for the circles.

投稿2023/07/11 23:33