Sử dụng CSS: trước và: sau các phần tử giả với CSS nội tuyến?

Tôi đang tạo một chữ ký email HTML bằng CSS nội tuyến (nghĩa là CSS trong stylecác thuộc tính) và tôi tò mò liệu có thể sử dụng các phần tử giả :beforevà :aftergiả hay không.

Nếu vậy, làm thế nào tôi có thể thực hiện một cái gì đó như thế này với CSS nội tuyến?

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

Bạn không thể chỉ định kiểu nội tuyến cho các phần tử giả.

Điều này là do các phần tử giả, như các lớp giả (xem câu trả lời của tôi cho câu hỏi khác này ), được định nghĩa trong CSS bằng cách sử dụng các bộ chọn làm trừu tượng của cây tài liệu không thể được biểu thị trong HTML. styleMặt khác, một thuộc tính nội tuyến được chỉ định trong HTML cho một thành phần cụ thể.

Vì các kiểu nội tuyến chỉ có thể xảy ra trong HTML, nên chúng sẽ chỉ áp dụng cho phần tử HTML mà chúng được xác định và không áp dụng cho bất kỳ phần tử giả nào mà nó tạo ra.

Bên cạnh đó, sự khác biệt chính giữa các phần tử giả và các lớp giả trong khía cạnh này là các thuộc tính được kế thừa theo mặc định sẽ được kế thừa bởi :beforevà :aftertừ phần tử tạo, trong khi các kiểu giả lớp hoàn toàn không áp dụng. Trong trường hợp của bạn, ví dụ, nếu bạn đặt text-align: justifythuộc tính kiểu nội tuyến cho một tdphần tử, nó sẽ được kế thừa bởi td:after. Thông báo trước là bạn không thể khai báo td:aftervới thuộc tính kiểu nội tuyến; bạn phải làm điều đó trong bản định kiểu.

như đã đề cập ở trên: không thể gọi một dòng giả css-class / -element. những gì tôi đã làm bây giờ là: cung cấp cho phần tử của bạn một mã định danh duy nhất, f.ex. một id hoặc một lớp duy nhất. và viết một <style>yếu tố phù hợp

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

fugly, nhưng css nội tuyến nào không ..?

Bạn có thể sử dụng dữ liệu trong dòng

 <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>

Không có bạn không thể nhắm mục tiêu các lớp giả hoặc các phần tử giả trong dòng-css như David Thomas nói. Để biết thêm chi tiết, hãy xem câu trả lời này của BoltClock về các lớp giả

Không. Thuộc tính style chỉ xác định các thuộc tính kiểu cho một phần tử HTML đã cho. Các lớp giả là một thành viên của họ các bộ chọn, không xuất hiện trong thuộc tính .....

Chúng ta cũng có thể viết sử dụng tương tự cho các phần tử giả

Không. Thuộc tính style chỉ xác định các thuộc tính kiểu cho một phần tử HTML đã cho. Các lớp giả và các phần tử giả là thành viên của họ bộ chọn, không xuất hiện trong thuộc tính để bạn không thể tạo kiểu cho chúng theo dòng.

Bạn không thể tạo các phần tử giả trong css nội tuyến.

Tuy nhiên, nếu bạn có thể tạo phần tử giả trong biểu định kiểu, thì có một cách để định kiểu nội tuyến bằng cách đặt kiểu nội tuyến cho phần tử cha của nó, sau đó sử dụng từ khóa kế thừa để tạo kiểu cho phần tử giả, như sau:

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

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

đôi khi điều này có thể được tiện dụng.

Có, có thể , chỉ cần thêm kiểu nội tuyến cho phần tử mà bạn thêm sau hoặc trước, Ví dụ

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

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

Như đã đề cập trước đó, bạn không thể sử dụng các phần tử nội tuyến để tạo kiểu các lớp giả . Trước và sau các lớp giả là trạng thái của các phần tử, không phải là các phần tử thực tế. Bạn chỉ có thể sử dụng JavaScript cho việc này.

Nếu bạn có quyền kiểm soát HTML thì bạn có thể thêm một yếu tố thực sự thay vì giả. : before và: after các phần tử giả được hiển thị ngay sau thẻ mở hoặc ngay trước thẻ đóng. Tương đương nội tuyến cho css này

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

Sẽ là một cái gì đó như thế này:

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

Ghi nhớ; Các phần tử "thực" trước và sau của bạn và bất cứ thứ gì có css nội tuyến sẽ làm tăng đáng kể kích thước trang của bạn và bỏ qua tối ưu hóa tải trang mà các phần tử css và giả bên ngoài có thể thực hiện được.

bạn có thể dùng

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

trong css

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