web-dev-qa-db-ja.com

：beforeおよび：afterを使用してインラインスタイルを作成する方法

私は http://www.ilikepixels.co.uk/drop/bubbler/ からバブルチャットを生成しました

私のページでは、その中に数字を入れます

.bubble {
  position: relative;
  width: 20px;
  height: 15px;
  padding: 0;
  background: #FFF;
  border: 1px solid #000;
  border-radius: 5px;
}

.bubble:after {
  content: "";
  position: absolute;
  top: 4px;
  left: -4px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent #FFF;
   display: block;
  width: 0;
  z-index: 1;
}

.bubble:before {
  content: "";
  position: absolute;
  top: 4px;
  left: -5px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent #000;
  display: block;
  width: 0;
  z-index: 0;
}

rgbを介して、その中の番号に応じてbackground-colorを変更したい

だから私のdivが

<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>

色をrgb(100,255,255)にしたい

問題は、これが三角形に影響を与えないことです。

：beforeと：afterが含まれるようにインラインcssを記述する方法は？

csscss3inline
59
Nick Ginanto

できません。インラインスタイルを使用すると、要素を直接ターゲットにできます。そこで他のセレクターを使用することはできません。

ただし、スタイルシートでさまざまな色を定義するさまざまなクラスを定義し、そのクラスを要素に追加することができます。

48
Jan Hančič

重要なのは、擬似要素でbackground-color: inherit;を使用することです。
参照： http://jsfiddle.net/EdUmc/

43
BigMacAttack

CSS変数 （より正確にはCSSカスタムプロパティと呼ばれます）を使用してできます。

  • スタイル属性に変数を設定します：style="--my-color-var: orange;"
  • スタイルシートで変数を使用します：background-color: var(--my-color-var);

ブラウザの互換性

最小限の例：

div {
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid black;
}

div:after {
  background-color: var(--my-color-var);
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
<div style="--my-color-var: orange;"></div>

あなたの例：

.bubble {
  position: relative;
  width: 30px;
  height: 15px;
  padding: 0;
  background: #FFF;
  border: 1px solid #000;
  border-radius: 5px;
  text-align: center;
  background-color: var(--bubble-color);
}

.bubble:after {
  content: "";
  position: absolute;
  top: 4px;
  left: -4px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent var(--bubble-color);
   display: block;
  width: 0;
  z-index: 1;
  
}

.bubble:before {
  content: "";
  position: absolute;
  top: 4px;
  left: -5px;
  border-style: solid;
  border-width: 3px 4px 3px 0;
  border-color: transparent #000;
  display: block;
  width: 0;
  z-index: 0;
}
<div class='bubble' style="--bubble-color: rgb(100,255,255);"> 100 </div>
30
Nathan Arthur

いくつかのユーザー定義色を動的にロードするなどの理由で本当にインラインで必要な場合は、コンテンツの直前にいつでも<style>要素を追加できます。

<style>#project-slide-1:before { color: #ff0000; }</style>
<div id="project-slide-1" class="project-slide"> ... </div>

PHPといくつかの（ワードプレスに触発された）ダミー関数の使用例：

<style>#project-slide-<?php the_ID() ?>:before { color: <?php the_field('color') ?>; }</style>
<div id="project-slide-<?php the_ID() ?>" class="project-slide"> ... </div>

HTML 5.2以降では、スタイル要素を本文内に配置することは有効ですが、スタイル要素を頭に配置することをお勧めします。

リファレンス： https://www.w3.org/TR/html52/document-metadata.html#the-style-element

6
Jules Colle