CSS：多行时文本下划线不适用，仅适用于最后一行

Question

文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，文字链接，

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);
}

&:hover {
    cursor: pointer;
    border-width: var(--text-link-hover--border-width);
    border-style: var(--text-link-hover--border-style);
    border-color: var(--text-link-hover--color);
    --text-link--color: var(--text-link-hover--color);
  }
}

当前： 预计：

我正在使用以下CSS附加代码和图像。请帮助我获得预期结果下划线应该出现在多行中。

Answer 1

• 将

  display: inline-flex;

  更新为

  display: inline;

  ：这确保链接的行为类似于典型的内联元素，这是跨多行应用文本修饰所必需的。

• 添加

  text-decoration: underline;

  ：这会明确设置链接的下划线。

<a href="" class="sample-text-link">
  <span class="sample-icon" title="information"></span>
  <span class="sample-text">
    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,
  </span>
</a>

.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);
}

.sample-text {
  text-decoration: underline;
}