CSS:Text underline is not applying if multiple lines,Only applying to last line

<a href="" class="sample-text-link"> <span class="sample-icon" title="information"></span> Text Link,Text Link,Text Link,Text Link,Text Link,Text Link,Text Link,Text Link,Text Link,Text Link,Text Link,Text Link,Text Link, Text Link,Text LinkText Link,Text Link,Text Link,Text Link,Text Link, Text Link,Text Link,Text Link,</a>

CSS:

.sample-text-link {
color: var(--text-link--color);
display: inline-flex;
font-size: Rem.rem(14);
line-height: Rem.rem(20);
background: transparent;
font-weight: var(--text-link--font-weight);
outline: none;
position: relative;
text-decoration: none;
align-items: center;
border: none;
padding: 0;

.sample-icon {
height: Rem.rem(20);
width: Rem.rem(20);
}

Current:
Expected:

I am using following css attached code and images.Please help me to get expected result underline should come to multiple lines.

You need to sign in to view this answers