htmlcss

Passing a new-line from HTML attribute to CSS content through attr()

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.

Solution

  • 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>