Thêm ngắt dòng vào :: after hoặc :: trước nội dung phần tử giả

Tôi không có quyền truy cập vào HTML hoặc PHP cho một trang và chỉ có thể chỉnh sửa qua CSS. Tôi đã thực hiện sửa đổi trên một trang web và thêm văn bản qua::after::before yếu tố giả hoặc đã thấy rằng nên sử dụng Unicode thoát cho những thứ như khoảng trắng trước hoặc sau nội dung được thêm vào.

Làm cách nào để thêm nhiều dòng trong content tài sản?

Ví dụ, phần tử ngắt dòng HTML chỉ để trực quan hóa những gì tôi muốn đạt được:

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

Các contenttài sản nêu:

Tác giả có thể bao gồm các dòng mới trong nội dung được tạo bằng cách viết chuỗi thoát "\ A" vào một trong các chuỗi sau thuộc tính 'nội dung'. Ngắt dòng được chèn này vẫn phải tuân theo thuộc tính 'khoảng trắng'. Xem "Chuỗi" và "Ký tự và vỏ" để biết thêm thông tin về chuỗi thoát "\ A".

Vì vậy, bạn có thể sử dụng:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

Tuy nhiên, khi thoát các chuỗi tùy ý, nên sử dụng \00000athay \Avì bởi vì bất kỳ số hoặc [a-f]ký tự nào được theo sau bởi dòng mới có thể cho kết quả không thể đoán trước :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

Bài viết hay giải thích những điều cơ bản (tuy nhiên không bao gồm ngắt dòng).

Toàn bộ Bunch of Amazing Stuff Các yếu tố giả có thể làm

Nếu bạn cần có hai phần tử nội tuyến trong đó một phần tử xâm nhập vào dòng tiếp theo trong phần tử khác, bạn có thể thực hiện điều này bằng cách thêm phần tử giả: sau với nội dung: '\ A' và khoảng trắng: pre

HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

.label:after {
    content: '\A';
    white-space: pre;
}

Tôi đã phải có các dòng mới trong một tooltip. Tôi đã phải thêm CSS này vào: sau:

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

Việc bọc từ có vẻ cần thiết.

Ngoài ra, \ A không hoạt động ở giữa văn bản để hiển thị, để buộc một dòng mới.

 
 

đã làm việc. Sau đó tôi đã có thể có được một tooltip như vậy:

Bạn có thể thử cái này

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

Js Fiddle

Đối với những người sẽ tìm kiếm 'Cách thay đổi nội dung động trên phần tử giả thêm dấu hiệu dòng mới "đây là câu trả lời

Các ký tự Html như 
sẽ không hoạt động khi thêm chúng vào html bằng JavaScript vì các ký tự đó được thay đổi trên tài liệu kết xuất

Thay vào đó, bạn cần tìm đại diện unicode của các ký tự này là U + 000D và U + 000A để chúng ta có thể làm một cái gì đó như

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

<div text='I want to break it in javascript, after comma sign'></div> 

Hy vọng điều này sẽ tiết kiệm thời gian của ai đó, chúc may mắn :)

Thêm ngắt dòng vào ::afterhoặc ::beforenội dung phần tử giả

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

Tìm thấy câu hỏi này ở đây dường như hỏi cùng một điều: Chuỗi ký tự dòng mới trong thuộc tính 'nội dung' CSS?

Có vẻ như bạn có thể sử dụng \Ahoặc \00000ađể đạt được mộtnewline

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

Các lớp .mbr và .dbr có thể mô phỏng hành vi ngắt dòng bằng cách sử dụng hiển thị CSS : bảng . Hữu ích nếu bạn muốn thay thế <br /> thực.

Kiểm tra demo này Codepen: https://codepen.io/Marko36/pen/RBweYY ,
và sau này về việc sử dụng trang web đáp ứng: Responsive dòng-chia: mô phỏng <br /> tại breakpoint được .