인라인 CSS로 의사 요소를 사용하기 전과 후 CSS ::를 사용하는 것?

인라인 CSS로 의사 요소를 사용하기 전과 후 CSS ::를 사용하는 것?

저는 인라인 CSS로 HTML 이메일 서명을 만들고 있습니다(즉, CSS instyle속성), 그리고 사용이 가능한지 궁금합니다.: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: justifya에 대한 인라인 스타일 속성으로td요소는 다음에 의해 상속됩니다.td:after. 주의해야 할 점은 당신이 그들을 신고할 수 없다는 것입니다.td:after인라인 스타일 속성을 사용합니다. 스타일시트에서 수행해야 합니다.

위에 언급한 바와 같이 cs pseudo-class / -cs를 인라인으로 호출할 수 없습니다.제가 이제 한 일은 당신의 요소에 고유 식별자, 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>

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

그러나 스타일시트에 유사 요소를 만들 수 있는 경우 상위 요소에 인라인 스타일을 설정한 다음 herit 키워드를 사용하여 유사 요소를 스타일링하는 방법이 있습니다.

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

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

때때로 이것은 편리할 수 있습니다.

아니요. David Thomas가 말한 inline-css의 유사 클래스 또는 유사 요소를 대상으로 할 수 없습니다.자세한 내용은 유사 클래스에 대한 볼트클럭의 답변을 참조

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

또한 유사 요소에 대해서도 동일한 용도로 쓸 수 있습니다.

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

앞서 언급한 바와 같이 의사 클래스 스타일링에 인라인 요소를 사용할 수 없습니다.의사 클래스 전후는 실제 요소가 아닌 요소의 상태입니다.이것은 자바스크립트만 사용할 수 있습니다.

HTML을 제어할 수 있는 경우 의사 요소 대신 실제 요소를 추가할 수 있습니다.::before그리고.::after의사 요소는 열린 태그 바로 뒤 또는 닫힌 태그 바로 앞에 렌더링됩니다.이 cs에한인물물에 대한

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 및 의사 요소가 가능하게 하는 페이지 로드 최적화를 무시합니다.

가능합니다. 추가하는 요소의 인라인 스타일만 추가하면 됩니다. 예제

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

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

사용가능

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

CSS로

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

EDITED:수, 에서 EDITED: 에 을 에서 으로 한 에서 한 으로 에 을 inherit조작하려는 유사 탐지 속성의 값:

HTML

<div style="color: whitesmoke;">
</div>

CSS

div::before {
  content: '';
  color: inherit;
}

예를 들어 배경 이미지에 유용합니다.

언급URL : https://stackoverflow.com/questions/14141374/using-css-before-and-after-pseudo-elements-with-inline-css