인라인 CSS에서 CSS : before 및 : after 유사 요소를 사용합니까?

나는 인라인 CSS (에 즉, CSS와 HTML 전자 메일 서명 만들고 있어요 style특성), 그리고는 그것이 사용할 수 있는지 여부에 대한 호기심 :before과 :after의사 요소.

그렇다면 인라인 CSS로 이와 같은 것을 어떻게 구현합니까?

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

의사 요소에 인라인 스타일을 지정할 수 없습니다.

이것은 의사 클래스와 같은 의사 요소 ( 이 다른 질문에 대한 나의 대답 참조 )가 HTML에서 표현할 수없는 문서 트리의 추상화로 선택기를 사용하여 CSS에서 정의되기 때문입니다. style반면에 인라인 속성은 특정 요소에 대해 HTML 내에 지정됩니다.

인라인 스타일은 HTML에서만 발생할 수 있기 때문에 정의 된 HTML 요소에만 적용되며 생성 된 의사 요소에는 적용되지 않습니다.

여담으로,이 관점에서 유사 요소 및 가상 클래스 사이의 주된 차이는 기본적으로 유전되는 특성 인 것 상속 에 의해 :before및 :after가상 클래스 스타일은 단지 전혀 적용되지 않는 반면, 상기 발생 소자로부터. 예를 들어 요소 text-align: justify의 인라인 스타일 속성에 배치하면이 속성 td이 상속됩니다 td:after. 주의 사항은 td:after인라인 스타일 속성으로 선언 할 수 없다는 것입니다. 스타일 시트에서해야합니다.

위에서 언급했듯이 : CSS 의사 클래스 /-요소 인라인을 호출 할 수 없습니다. 내가 지금 한 일은 요소에 고유 식별자 f.ex를 지정하는 것입니다. ID 또는 고유 클래스 피팅 <style>요소를 작성

<style>#id29:before { content: "*";}</style>
<article id="id29">
  <!-- something -->
</article>

애매하지만, 어떤 인라인 CSS가 아닙니다 ..?

인라인으로 데이터를 사용할 수 있습니다

 <style>   
 td { text-align: justify; }
 td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>

<table><tr><td data-content="post"></td></tr></table>

David Thomas가 말한 것처럼 인라인 CSS의 의사 클래스 또는 의사 요소 를 대상으로 할 수는 없습니다 . 자세한 내용은 볼 이 의해 답변을 BoltClock 에 대한 의사 클래스를

아니요. style 속성은 주어진 HTML 요소에 대한 스타일 속성 만 정의합니다. 의사 클래스는 선택기 패밀리의 멤버이며 속성에서 발생하지 않습니다 .....

의사 요소에 대해서도 같은 것을 쓸 수 있습니다

아니요. style 속성은 주어진 HTML 요소에 대한 스타일 속성 만 정의합니다. 의사 클래스와 의사 요소는 선택기 패밀리의 멤버이며 속성에서 발생하지 않으므로 인라인으로 스타일을 지정할 수 없습니다.

인라인 CSS에서는 의사 요소를 만들 수 없습니다.

그러나 스타일 시트에서 의사 요소를 만들 수있는 경우 인라인 스타일을 부모 요소로 설정 한 다음 inherit 키워드를 사용하여 의사 요소의 스타일을 지정하여 인라인 스타일을 지정하는 방법이 있습니다.

<parent style="background-image:url(path/to/file); background-size:0px;"></p>

<style> 
   parent:before{
      content:'';
      background-image:inherit;
      (other)
   }
</style>

때때로 이것은 유용 할 수 있습니다.

예, 가능합니다 . 이후 또는 이전에 추가 한 요소에 인라인 스타일을 추가하십시오. 예

 <style>
     .horizontalProgress:after { width: 45%; }
 </style><!-- Change Value from Here -->

 <div class="horizontalProgress"></div>

앞에서 언급했듯이 의사 클래스 스타일 지정에는 인라인 요소를 사용할 수 없습니다 . 의사 전후 클래스는 실제 요소가 아닌 요소의 상태입니다. 이를 위해 JavaScript 만 사용할 수 있습니다.

HTML을 제어 할 수 있으면 유사 요소 대신 실제 요소를 추가 할 수 있습니다. : before 및 : after 유사 요소는 열린 태그 바로 뒤에 또는 닫기 태그 바로 앞에 렌더링됩니다. 이 CSS에 해당하는 인라인

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

다음과 같이 될 것입니다 :

<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>

명심하십시오; "실제"앞뒤 요소 및 인라인 CSS가있는 항목은 페이지 크기를 크게 늘리고 외부 CSS 및 유사 요소가 가능하게하는 페이지로드 최적화를 무시합니다.

당신이 사용할 수있는

parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");

CSS로

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}