-1

I have a block of text that is repeated on several subpages of my web. As I rewrite it from time to time and dont use db, I decided to define it in my css file by pseudoelements (before, after).

Problem is - this text should be in 2 paragraphs and I dont know how to include linebreak in the Content property in css. Found some answers, but no matter what I use (\a, \A, \n) nothing works. Cant use "white-space:pre" as I dont know where those linebreaks will be - all I want to do is to add one more linebreak into Contect.

For better understanding, this is what I want to achieve

enter image description here

And this is how mI wanted to do it In css:

.gettomestia:before { content:"How to get to Mestia: "; font-weight:bold; }

.gettomestia:after { content:"longer text in 2 paragraphs"; display:inline-block; }

And in aspx file just add span with class = "gettomestia"

I know, its sloppy, but I know no better way. Does anybody know how to enter that linebreak into Content of "after" pseudoelement? Thank you.

Jozef
  • 479
  • 1
  • 9
  • 36
  • 2
    That's not what the `content` property is for. It should be used for **styling** not actual text content. I suggest you rethink your methodology. – Paulie_D Jul 16 '16 at 20:00
  • Did you try putting `white-space: pre` into the `:before` pseudo-element itself? –  Jul 16 '16 at 20:06
  • Possible duplicate of [How to insert a line break before an element using CSS](http://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css) –  Jul 16 '16 at 20:06
  • Add title and use it with attr -http://codepen.io/nagasai/pen/jAYRZw Hope this works for you – Naga Sai A Jul 16 '16 at 20:08
  • https://jekyllrb.com/ – Ry- Jul 16 '16 at 20:09
  • torazaburo: Yes, but in this case I need to define all linebreaks, not just that sigle one that divides paragraphs. Paulie_D: what do you then recommend for repeated blocks of text? Using pseudoelements seemed practical to me. – Jozef Jul 16 '16 at 20:21
  • If you post a minimal code layout so we can see how you think, we might be able to suggest something better – Asons Jul 16 '16 at 20:25

1 Answers1

1

Try this...

p:before { 
 content: attr(data-paragraph1) '\00000A' attr(data-paragraph2);
  display: block;
  white-space:pre;
}
<p data-paragraph1="This is paragraph 1" data-paragraph2="This is paragraph 2">This is simple paragraph</p>
Rahul K
  • 888
  • 5
  • 16