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

Html – How to add a linebreak into the content of the ::before pseudo element using attr()

I wan’t to add a linebreak in the content of a ::before using a dataset.

Here is my code:

HTML:

<span id="timer-container" title="11" data-average="0:00 a 0:00">
    <p id="hours">0</p>
    <p class="seperation">:</p>
    <p id="minutes">0</p>
    <p class="seperation">:</p>
    <p id="seconds">0</p>
    <p class="seperation">.</p>
    <p id="milliseconds">00</p>
</span>

CSS:

#timer-container::before {
    content: attr(data-average);
    white-space: pre;
    font-size: 17px;
}
Tags:

2

Answers


  1. 0

    I do not understand why this works when using A does not but put it here in case it helps.

    In the text editor (notepad++) I just typed in a newline instead of the a and it works:

    <span id="timer-container" title="11" data-average="0:00
0:00">
    <p id="hours">0</p>
    <p class="seperation">:</p>
    <p id="minutes">0</p>
    <p class="seperation">:</p>
    <p id="seconds">0</p>
    <p class="seperation">.</p>
    <p id="milliseconds">00</p>
</span>
<style>
  #timer-container::before {
    content: attr(data-average);
    white-space: pre;
    font-size: 17px;
  }
</style>
    Login or Signup to reply.
  2. 0

    Instead of A use the numeric entity reference &#xA;

    #timer-container::before {
    content: attr(data-average);
    white-space: pre-line;
    font-size: 17px;
}
    <span id="timer-container" title="11" data-average="0:00 &#xA; 0:00">
    <p id="hours">0</p>
    <p class="seperation">:</p>
    <p id="minutes">0</p>
    <p class="seperation">:</p>
    <p id="seconds">0</p>
    <p class="seperation">.</p>
    <p id="milliseconds">00</p>
</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search