How to add new line in Tooltips | ::after | CSS

 In HTML:

<tr>
<td>RFC</td>
<td>
<span class="rcftip" tabindex="0" data-descr="AD001: Non Aadhar XML journey &#13;&#10;BU001: DPDs in Bureau, Low score and related issues &#13;&#10;BU002: Presence of default qualifiers &#13;&#10;INC001: Low reported Income &#13;&#10;INC002: Low Income as per SMS &#13;&#10;INC003: Low Income as per Bank Statement &#13;&#10;EL001: Eligibility less than defined &#13;&#10;M001: Name match failed in KYC &#13;&#10;M002: Name match failed in Telco &#13;&#10;M003: Name Match failed in Address proof &#13;&#10;M004: Face match failed &#13;&#10;M005: Distance match failed &#13;&#10;M006: No Local address found">
<span th:if="${user.rfc != null}" th:text="${user.rfc}"></span>
</span>
</td>
</tr>

In CSS:

span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}

.rcftip:after {
content: '\A';
white-space: pre;
word-wrap: break-word;
}


In addition, the \A didn't work in the middle of the text to display, to force a new line. I have used this     &#13;&#10;