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

인라인 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 요소에 대한 스타일 속성 만 정의합니다. 의사 클래스와 의사 요소는 선택기 패밀리의 멤버이며 속성에서 발생하지 않으므로 인라인 스타일을 지정할 수 없습니다.

---

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

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

Would be something like this:

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

Keep in mind; Your "real" before and after elements and anything with inline css will greatly increase the size of your pages and ignore page load optimizations that external css and pseudo elements make possible.

---

You can't create pseudo elements in inline css.

However, if you can create a pseudo element in a stylesheet, then there's a way to style it inline by setting an inline style to its parent element, and then using inherit keyword to style the pseudo element, like this:

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

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

sometimes this can be handy.

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