CSS-ben hogyan lehet sortörést beszúrni?

Így nem. Ha már mindenképpen css-ben kell megoldani, akkor inkább:

display: block;

esetleg

margin-bottom: …;

De sortörést leginkább HTML-ben lehet a legegyszerűbben betenni.

Szerintem sejted a választ: A content-ben nem lehet HTML szöveget megadni. Lásd: http://www.w3schools.com/cssref/pr_gen_content.asp

Gondolom már csak azért sem, mert igen érdekes, ellentmondásos, végtelen ciklusos vagy akár paradox helyzethez vezethet.

Pl: img:after { content: "<img… />"; }

A koncepció a CSS-nél, hogy a HTML tartalmazza a szöveget logikailag elkülönülő egységekben, míg a CSS tartalmazza a megjelenítést. Egy sortörés általában nem pusztán megjelenítési kérdés, hanem tartalmi kérdés.

Mire való akkor mégis az egész?

Mondok egy példát: Ugyanaz a HTML tartalom jelenik meg a képernyőn és nyomtatásban. A linkekkel ilyenkor némi gond van. Az :after + contenttel viszont megoldható a dolog.

HTML: <a href="http://www.google.com">Google</a>

A képernyőhöz tartozó CSS-nél nincs dolgunk.

A nyomtatáshoz tartozó CSS-nél viszont megléphetjük ezt:

a:after { content: " [ " attr(href) " ] "; }

Vagy pl. jó arra, hogy az idézőjelek kódtól függetlenek legyenek:

.quote:before { content: open-quote; }

.quote:after { content: close-quote; }