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

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

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

Current:Current behavior

Expected:Expected Behavior

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

Tags:

2

Answers


  1. 0

    • Update display: inline-flex; to display: inline;: which ensures that the link behaves like a typical inline element, which is required for text decoration to apply across multiple lines.

    • Add text-decoration: underline;: This explicitly sets the underline for the link.

    <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;
}
    Login or Signup to reply.
  2. 0

    Solution 1: Use text-decoration-skip-ink: none (Modern Browsers)
    Some browsers skip underlining parts of text to avoid overlapping descenders. Adding this property ensures the underline is applied properly to all lines.

    .underline-text {
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

    Solution 2: Use border-bottom for Custom Underline
    border-bottom gives you more control over how the underline looks and works across multiple lines.

    .underline-text {
    display: inline;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
}

    Solution 3: Use box-shadow as an Underline Alternative
    If you need a more styled underline, box-shadow can also be used.

    .underline-text {
    display: inline;
    box-shadow: inset 0 -2px 0 0 currentColor;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search