Newlines from attribute text in pseudo element's content

With content: attr(attribute-name) it is possible to add a pseudo element (:before or :after) with text content from an element's attribute. Besides that the content property of the pseudo element does allow new lines via the A character within the content of the pseudo element, too:

content: attr(attribute-name1) 'a' attr(attribute-name2)

What I now want is to be able to control the position and existence of newline characters within the value of a single attribute containing a multi line text. The text is defined by the user and thus out of my control.

Element:

<span data-usertext="Some random text with a some newlines"/>

CSS:

span:after {

  content: attr(data-usertext);

  white-space: pre;

}

Sadly this does not work: The a is printed out as if it is a simple character sequence. I also tried r, n and <br /> out of curiosity.

How can I get the newlines from the attribute interpreted as such without using Javascript?

A fiddle I used to try around: https://jsfiddle.net/dWkdp/3039/

edited Jan 1 at 20:53

asked Jan 1 at 16:40

Sebastian Barth

1,66332537

add a comment |

content: attr(attribute-name1) 'a' attr(attribute-name2)

Element:

<span data-usertext="Some random text with a some newlines"/>

CSS:

span:after {

  content: attr(data-usertext);

  white-space: pre;

}

Sadly this does not work: The a is printed out as if it is a simple character sequence. I also tried r, n and <br /> out of curiosity.

How can I get the newlines from the attribute interpreted as such without using Javascript?

A fiddle I used to try around: https://jsfiddle.net/dWkdp/3039/

edited Jan 1 at 20:53

asked Jan 1 at 16:40

Sebastian Barth

1,66332537

add a comment |

content: attr(attribute-name1) 'a' attr(attribute-name2)

Element:

<span data-usertext="Some random text with a some newlines"/>

CSS:

span:after {

  content: attr(data-usertext);

  white-space: pre;

}

Sadly this does not work: The a is printed out as if it is a simple character sequence. I also tried r, n and <br /> out of curiosity.

How can I get the newlines from the attribute interpreted as such without using Javascript?

A fiddle I used to try around: https://jsfiddle.net/dWkdp/3039/

edited Jan 1 at 20:53

asked Jan 1 at 16:40

Sebastian Barth

1,66332537

content: attr(attribute-name1) 'a' attr(attribute-name2)

Element:

<span data-usertext="Some random text with a some newlines"/>

CSS:

span:after {

  content: attr(data-usertext);

  white-space: pre;

}

Sadly this does not work: The a is printed out as if it is a simple character sequence. I also tried r, n and <br /> out of curiosity.

How can I get the newlines from the attribute interpreted as such without using Javascript?

A fiddle I used to try around: https://jsfiddle.net/dWkdp/3039/

html css attributes newline css-variables

edited Jan 1 at 20:53

asked Jan 1 at 16:40

Sebastian Barth

1,66332537

edited Jan 1 at 20:53

asked Jan 1 at 16:40

Sebastian Barth

1,66332537

edited Jan 1 at 20:53

asked Jan 1 at 16:40

Sebastian Barth

1,66332537

asked Jan 1 at 16:40

Sebastian Barth

1,66332537

asked Jan 1 at 16:40

Sebastian Barth

1,66332537

add a comment |

1 Answer
1

active

oldest

votes

When using HTML you need to consider for a new line instead of A that is used with CSS. You need to also add white-space:pre

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with 
 some newlines"></span>

You can also do this:

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with &NewLine; some newlines"></span>

Check this link for more details: https://dev.w3.org/html5/html-author/charref

edited Jan 1 at 21:06

answered Jan 1 at 19:24

Temani Afif

78k94490

Thank you! That solves the problem. I totally forgot about the HTML entities. I added the missing white-space: pre as I forgot to insert it from the fiddle.

– Sebastian Barth
Jan 1 at 20:55

I made progress with my code and now I also need to set the attribute via JS (span.dataset.usertext = "Some new &10; user text"). When doing so the entities in the text such as &10; are not resolved. Instead they get interpreted as text, again (see jsfiddle.net/dWkdp/3042). Any idea?

– Sebastian Barth
Jan 1 at 21:00

@SebastianBarth yes with JS also it's not the same as HTML, let me remember the trick and will let you know ;)

– Temani Afif
Jan 1 at 21:06

I found a solution but it is not that nice: The problem is that my text is not parsed as HTML. Instead it is parsed as text and also set as text to the attribute. To get it parsed as HTML I just created a new element set its HTML to my text containing the entities and fetched it again as HTML: const div = document.createElement('div'); div.innerHTML = 'foo &10; bar'; span.dataset.usertext = div.innerHTML; – Of course this introduces a security problem that forces me to first filter the text. I hope you have a better idea! See jsfiddle.net/dWkdp/3044

– Sebastian Barth
Jan 1 at 21:18

@SebastianBarth yes, I am afraid this will be your only way actually.

– Temani Afif
Jan 1 at 21:21

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997169%2fnewlines-from-attribute-text-in-pseudo-elements-content%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

When using HTML you need to consider for a new line instead of A that is used with CSS. You need to also add white-space:pre

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with 
 some newlines"></span>

You can also do this:

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with &NewLine; some newlines"></span>

Check this link for more details: https://dev.w3.org/html5/html-author/charref

edited Jan 1 at 21:06

answered Jan 1 at 19:24

Temani Afif

78k94490

Thank you! That solves the problem. I totally forgot about the HTML entities. I added the missing white-space: pre as I forgot to insert it from the fiddle.

– Sebastian Barth
Jan 1 at 20:55

I made progress with my code and now I also need to set the attribute via JS (span.dataset.usertext = "Some new &10; user text"). When doing so the entities in the text such as &10; are not resolved. Instead they get interpreted as text, again (see jsfiddle.net/dWkdp/3042). Any idea?

– Sebastian Barth
Jan 1 at 21:00

@SebastianBarth yes with JS also it's not the same as HTML, let me remember the trick and will let you know ;)

– Temani Afif
Jan 1 at 21:06

I found a solution but it is not that nice: The problem is that my text is not parsed as HTML. Instead it is parsed as text and also set as text to the attribute. To get it parsed as HTML I just created a new element set its HTML to my text containing the entities and fetched it again as HTML: const div = document.createElement('div'); div.innerHTML = 'foo &10; bar'; span.dataset.usertext = div.innerHTML; – Of course this introduces a security problem that forces me to first filter the text. I hope you have a better idea! See jsfiddle.net/dWkdp/3044

– Sebastian Barth
Jan 1 at 21:18

@SebastianBarth yes, I am afraid this will be your only way actually.

– Temani Afif
Jan 1 at 21:21

add a comment |

When using HTML you need to consider for a new line instead of A that is used with CSS. You need to also add white-space:pre

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with 
 some newlines"></span>

You can also do this:

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with &NewLine; some newlines"></span>

Check this link for more details: https://dev.w3.org/html5/html-author/charref

edited Jan 1 at 21:06

answered Jan 1 at 19:24

Temani Afif

78k94490

Thank you! That solves the problem. I totally forgot about the HTML entities. I added the missing white-space: pre as I forgot to insert it from the fiddle.

– Sebastian Barth
Jan 1 at 20:55

I made progress with my code and now I also need to set the attribute via JS (span.dataset.usertext = "Some new &10; user text"). When doing so the entities in the text such as &10; are not resolved. Instead they get interpreted as text, again (see jsfiddle.net/dWkdp/3042). Any idea?

– Sebastian Barth
Jan 1 at 21:00

@SebastianBarth yes with JS also it's not the same as HTML, let me remember the trick and will let you know ;)

– Temani Afif
Jan 1 at 21:06

I found a solution but it is not that nice: The problem is that my text is not parsed as HTML. Instead it is parsed as text and also set as text to the attribute. To get it parsed as HTML I just created a new element set its HTML to my text containing the entities and fetched it again as HTML: const div = document.createElement('div'); div.innerHTML = 'foo &10; bar'; span.dataset.usertext = div.innerHTML; – Of course this introduces a security problem that forces me to first filter the text. I hope you have a better idea! See jsfiddle.net/dWkdp/3044

– Sebastian Barth
Jan 1 at 21:18

@SebastianBarth yes, I am afraid this will be your only way actually.

– Temani Afif
Jan 1 at 21:21

add a comment |

When using HTML you need to consider for a new line instead of A that is used with CSS. You need to also add white-space:pre

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with 
 some newlines"></span>

You can also do this:

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with &NewLine; some newlines"></span>

Check this link for more details: https://dev.w3.org/html5/html-author/charref

edited Jan 1 at 21:06

answered Jan 1 at 19:24

Temani Afif

78k94490

When using HTML you need to consider for a new line instead of A that is used with CSS. You need to also add white-space:pre

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with 
 some newlines"></span>

You can also do this:

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with &NewLine; some newlines"></span>

Check this link for more details: https://dev.w3.org/html5/html-author/charref

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with 
 some newlines"></span>

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with 
 some newlines"></span>

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with &NewLine; some newlines"></span>

span:after {

  content: attr(data-usertext);

  white-space:pre;

}

<span data-usertext="Some random text with &NewLine; some newlines"></span>

edited Jan 1 at 21:06

answered Jan 1 at 19:24

Temani Afif

78k94490

edited Jan 1 at 21:06

answered Jan 1 at 19:24

Temani Afif

78k94490

answered Jan 1 at 19:24

Temani Afif

78k94490

answered Jan 1 at 19:24

Temani Afif

78k94490

Thank you! That solves the problem. I totally forgot about the HTML entities. I added the missing white-space: pre as I forgot to insert it from the fiddle.

– Sebastian Barth
Jan 1 at 20:55

I made progress with my code and now I also need to set the attribute via JS (span.dataset.usertext = "Some new &10; user text"). When doing so the entities in the text such as &10; are not resolved. Instead they get interpreted as text, again (see jsfiddle.net/dWkdp/3042). Any idea?

– Sebastian Barth
Jan 1 at 21:00

@SebastianBarth yes with JS also it's not the same as HTML, let me remember the trick and will let you know ;)

– Temani Afif
Jan 1 at 21:06

I found a solution but it is not that nice: The problem is that my text is not parsed as HTML. Instead it is parsed as text and also set as text to the attribute. To get it parsed as HTML I just created a new element set its HTML to my text containing the entities and fetched it again as HTML: const div = document.createElement('div'); div.innerHTML = 'foo &10; bar'; span.dataset.usertext = div.innerHTML; – Of course this introduces a security problem that forces me to first filter the text. I hope you have a better idea! See jsfiddle.net/dWkdp/3044

– Sebastian Barth
Jan 1 at 21:18

@SebastianBarth yes, I am afraid this will be your only way actually.

– Temani Afif
Jan 1 at 21:21

add a comment |

Thank you! That solves the problem. I totally forgot about the HTML entities. I added the missing white-space: pre as I forgot to insert it from the fiddle.

– Sebastian Barth
Jan 1 at 20:55

I made progress with my code and now I also need to set the attribute via JS (span.dataset.usertext = "Some new &10; user text"). When doing so the entities in the text such as &10; are not resolved. Instead they get interpreted as text, again (see jsfiddle.net/dWkdp/3042). Any idea?

– Sebastian Barth
Jan 1 at 21:00

@SebastianBarth yes with JS also it's not the same as HTML, let me remember the trick and will let you know ;)

– Temani Afif
Jan 1 at 21:06

I found a solution but it is not that nice: The problem is that my text is not parsed as HTML. Instead it is parsed as text and also set as text to the attribute. To get it parsed as HTML I just created a new element set its HTML to my text containing the entities and fetched it again as HTML: const div = document.createElement('div'); div.innerHTML = 'foo &10; bar'; span.dataset.usertext = div.innerHTML; – Of course this introduces a security problem that forces me to first filter the text. I hope you have a better idea! See jsfiddle.net/dWkdp/3044

– Sebastian Barth
Jan 1 at 21:18

@SebastianBarth yes, I am afraid this will be your only way actually.

– Temani Afif
Jan 1 at 21:21

Thank you! That solves the problem. I totally forgot about the HTML entities. I added the missing white-space: pre as I forgot to insert it from the fiddle.

– Sebastian Barth
Jan 1 at 20:55

I made progress with my code and now I also need to set the attribute via JS (span.dataset.usertext = "Some new &10; user text"). When doing so the entities in the text such as &10; are not resolved. Instead they get interpreted as text, again (see jsfiddle.net/dWkdp/3042). Any idea?

– Sebastian Barth
Jan 1 at 21:00

@SebastianBarth yes with JS also it's not the same as HTML, let me remember the trick and will let you know ;)

– Temani Afif
Jan 1 at 21:06

I found a solution but it is not that nice: The problem is that my text is not parsed as HTML. Instead it is parsed as text and also set as text to the attribute. To get it parsed as HTML I just created a new element set its HTML to my text containing the entities and fetched it again as HTML: const div = document.createElement('div'); div.innerHTML = 'foo &10; bar'; span.dataset.usertext = div.innerHTML; – Of course this introduces a security problem that forces me to first filter the text. I hope you have a better idea! See jsfiddle.net/dWkdp/3044

– Sebastian Barth
Jan 1 at 21:18

@SebastianBarth yes, I am afraid this will be your only way actually.

– Temani Afif
Jan 1 at 21:21

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu