0

Given an HTML attribute, location-id, whose value is three unicode characters:

.loc::before { content: attr(location-id) }
<span class="loc" location-id="&#x25B6;&#x20;&#x25B6;"></span>

the three unicode characters are displayed as intended: two ▶ characters separated by a space.

How, if it is possible, do I instead put a newline between the two arrows, so one displays above the other?

Neither of these work:

<span class="loc" location-id="&#x25B6;&#xA;&#x25B6;"></span>

<span class="loc" location-id="&#x25B6;&#xD;&#x25B6;"></span>

I get, on one line, a space between two arrows.

Improve this question
0

2 Answers 2

Reset to default
3

In HTML by default line break (or a sequence of breaks and/or spaces) is being displayed as a single space symbol.
But you can change that using white-space: pre:

.loc::before {
  content: attr(location-id);
  white-space: pre;
}
<span class="loc" location-id="&#x25B6;&#xA;&#x25B6;"></span>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You don't get explicit line breaks in pseudo element content unless you mark it as preformatted text as @kosh points out in their answer, and the concept of a "new line" is a bit ill defined for things that aren't actual text, so another option is to simply use the same approach as for any other content that needs to be placed and sized: explicitly mark your content as a block (or inline-block, table-cell, whatever actually makes sense for your content) and then give it a width that causes text to wrap to the next line.

Also, HTML can do unicode just fine: no need for codepoint entities, if you need ▶, just write ▶, that will work perfectly fine:

.loc::before {
  display: block;
  background: #F002;
  width: 1em;
  content: attr(data-location-id)
}
<span class="loc" data-location-id="▶ ▶"></span>

And note that <span> has a well-defined attribute set, so while it'll work, that location-id attribute is technically invalid HTML. Turn it into data-location-id and it'll be valid, and as a bonus will be accessible on the JS side as the element's .dataset.locationId too.

Improve this answer

6 Comments

better inline-block
also an option, it's mostly up to what they need: pseudo-elements get styled the same as any other element so they're free to tailor things as needed.
I don't understand the downvote, it's a perfectly working solution.
@Kosh he explicitly said that it's not possible as a first sentence which is wrong. I also don't understand the upvote.
"he" can be talked to - just point it out, and I'll edit the post. That's how this website works. That's how we get better answers for everyone.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.