after and before pseudo elements attr(title) with break line-CodePudding

\n,\r, , it didn't work for them. How to go to a bottom line?

.question:hover::before {
    content: attr(title);
    position: absolute;
    width: 200px;
    background-color:#000;
    color:#fff;
}

<p  title="first line
second line
third line">?</p>

CodePudding user response：

Just add white-space:break-spaces;

.question:hover::before {
    content: attr(title);
    position: absolute;
    width: 200px;
    background-color:#000;
    color:#fff;
    white-space:break-spaces;
}

<p  title="first line
second line
third line">?</p>

CodePudding user response：

Use <pre> instead of <p>.
<pre> is preformated text; wich means it shows spaces and newline instead of <p> which just removes them.

.question:hover::before {
    content: attr(title);
    position: absolute;
    width: 200px;
    background-color:#000;
    color:#fff;
}

<pre  title="first line 
second line 
third line">?</pre>