: before 및 : after로 인라인 스타일을 만드는 방법

: 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;
}

나는 background-color그것을 통해 거품의 내부 숫자에 따라 변경 되기를 원합니다.rgb

그래서 내 사업부가

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

나는 색깔을 원한다 rgb(100,255,255)

문제는 이것이 삼각형에 영향을 미치지 않는다는 것입니다.

: before 및 : after를 포함하도록 인라인 CSS를 어떻게 작성합니까?

---

당신은 할 수 없습니다. 인라인 스타일을 사용하면 요소를 직접 타겟팅합니다. 거기에서 다른 선택기를 사용할 수 없습니다.

그러나 할 수있는 일은 스타일 시트에서 다른 색상을 정의하는 다른 클래스를 정의한 다음 요소에 클래스를 추가하는 것입니다.

---

핵심은 background-color: inherit;의사 요소 에서 사용 하는 것입니다.
참조 : http://jsfiddle.net/EdUmc/

---

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>

---

예를 들어 일부 사용자 정의 색상을 동적으로로드하는 등 인라인으로 실제로 필요한 경우 <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

참고 URL : https://stackoverflow.com/questions/14436155/how-to-create-inline-style-with-before-and-after