擬似要素の内容の後ろに::または:: beforeに改行を追加する

Question

私はページのHTMLまたはPHPにアクセスできず、CSS経由でしか編集できません。私はサイト上で修正を行い、::afterまたは::before疑似要素を介してテキストを追加していました。追加された内容の前または後にスペースなどのエスケープUnicodeを使用する必要があります。

contentプロパティに複数の行を追加するにはどうすればよいですか？

HTML区切り線要素が唯一私が達成したいものをを視覚化するある例では、次

同じことを聞いているようだここで、この質問が見つかり

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

Answer 1

contentプロパティの状態：

著者は、「コンテンツ」プロパティの後に文字列のいずれかに「\ A」エスケープシーケンスを書き込むことによって生成されたコンテンツ内の改行を含むことができ。この挿入された改行は、まだ 'white-space'プロパティの対象となるです。「\ A」エスケープシーケンスの詳細については、「文字列」と「文字と大文字」を参照してください。

あなたが使用することができます。

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

http://jsfiddle.net/XkNxs/

Answer 2

：Newline character sequence in CSS 'content' property?

のように見えるが\Aまたは\00000aを使用して、newline

Answer 3

を達成することができます。

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

Js Fiddle

Answer 4

ニースの記事explane使用すると、1つは、に侵入2つのインライン要素を持っている必要がある場合は

Adding a line break between two inline elements

をしたい何か別の要素内の次の行は、これを達成することができますyは擬似要素を追加： '\ A' と空白：コンテンツとした後、私はツールチップに新しい行を持っていた

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

Answer 5

を事前。このCSSを私の後に追加しなければならなかった：after：

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

ワップが必要なようです。

さらに、新しい行を強制するために、表示するテキストの途中で\ Aが機能しませんでした。


 

が働いた。私はそのようなツールヒントを得ることができた：