Html Question posted in
Some basic documentation can be found here.

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="▶ ▶"></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="▶
▶"></span>

<span class="loc" location-id="▶
▶"></span>

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

Tags:

2

Answers


  1. 0

    You don’t get explicit line breaks in pseudo element content (e.g. you can’t slip a newline into an attribute and make that work), but you can just 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, just like in "regular" CSS.

    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(location-id)
}
    <span class="loc" location-id="▶ ▶"></span>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search