How to achieve this "underline" effect on hover, ran out of options

Question

I am trying to achieve this specific effect but I cannot seem to do it.

I've tried creating a ::after pseudo element, tried the new "text-underline-offset" property but it doesn't work so well with older browsers, I can't seem to do it.

I am trying to re-create this 1:1 so the text is the exact same and the design is the exact same. the other problem is that the header expands into two lines.

What could I use to achieve this?

HTML

.update_slider {
  margin-bottom: rem(100);
}
.update_slider__update {
  width: rem(350);
  margin-right: rem(50);
} 
.update_slider__update__img {
  height: rem(200);
  margin-bottom: rem(20);
}
.update_slider__update__img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.update_slider__update__header {
  border-bottom: 1px solid #dce0e5;
  padding-bottom: rem(15);
  position: relative;
}
.update_slider__update__header h3 {
  font-size: rem(30);
  font-weight: 600;
}
.update_slider__update__header h3:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 10px;
}
.update_slider__update__timestamp {
  margin-top: rem(15);
  margin-bottom: rem(20);
}
.update_slider__update__timestamp__time {
  margin-bottom: rem(8);
}
.update_slider__update__timestamp__type {
  color: orange;
  font-weight: 500;
}

<div class="update_slider__update">
  <div class="update_slider__update__img">
    <img src="assets/img/news-placeholder-4.jpg" alt="" />
  </div>
  <div class="update_slider__update__header">
    <h3>Lorem ipsum dolor sit amet, consectetur</h3>
  </div>
  <div class="update_slider__update__timestamp">
    <div class="update_slider__update__timestamp__time">
      <p>Posted 7th December 2020</p>
    </div>
    <div class="update_slider__update__timestamp__type">
      <p>Selling, Mortgages</p>
    </div>
  </div>
  <div class="update_slider__update__button">
    <a href="#" class="btn_main btn_orange">Read News</a>
  </div>
</div>

please share html and css code for this what are you trying to do achieve this? — Minal Chauhan, Jan 13 '21 at 04:10
this can help you: https://stackoverflow.com/questions/45576428/how-to-increase-width-of-underline-for-the-multiline-text-when-on-hover — Minal Chauhan, Jan 13 '21 at 04:29

score 3 · Accepted Answer · answered Jan 13 '21 at 04:25

3

I was able to achieve this with a box-shadow on an inline element.

.underline {
  box-shadow: inset 0 -0.35em transparent;
  display: inline;
}

.underline:hover {
  box-shadow: inset 0 -0.35em #e2766c;
}

<h1 class="underline">Donec ut ultricies leo. Ut<br>venenatis, libero id males.</h1>

answered Jan 13 '21 at 04:25

cam

3,179
1
12
15

1

Perfect, exactly what I am looking for, thank you – Donnie Berry Jan 13 '21 at 04:33

score 0 · Answer 2 · answered Jan 13 '21 at 04:34

just set text-decoration-skip-ink to none;

and text-underline-offset to -3px;

and text-underline-position to initial;

.update_slider {
  margin-bottom: rem(100);
}
.update_slider__update {
  width: rem(350);
  margin-right: rem(50);
}
.update_slider__update__img {
  height: rem(200);
  margin-bottom: rem(20);
}
.update_slider__update__img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.update_slider__update__header {
  border-bottom: 1px solid #dce0e5;
  padding-bottom: rem(15);
  position: relative;
}
.update_slider__update__header h3 {
  font-size: rem(30);
  font-weight: 600;
}
.update_slider__update__header h3:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #ff6666;
  text-decoration-thickness: 10px;
  text-underline-position: initial;
  text-decoration-skip-ink: none;
  text-underline-offset: -3px;
}
.update_slider__update__timestamp {
  margin-top: rem(15);
  margin-bottom: rem(20);
}
.update_slider__update__timestamp__time {
  margin-bottom: rem(8);
}
.update_slider__update__timestamp__type {
  color: orange;
  font-weight: 500;
}

<div class="update_slider__update">
          <div class="update_slider__update__img">
            <img src="assets/img/news-placeholder-4.jpg" alt="" />
          </div>
          <div class="update_slider__update__header">
            <h3>Lorem ipsum dolor sit amet, consectetur</h3>
          </div>
          <div class="update_slider__update__timestamp">
            <div class="update_slider__update__timestamp__time">
              <p>Posted 7th December 2020</p>
            </div>
            <div class="update_slider__update__timestamp__type">
              Selling, Mortgages
            </div>
          </div>
          <div class="update_slider__update__button">
            <a href="#" class="btn_main btn_orange">Read News</a>
          </div>
        </div>

How to achieve this "underline" effect on hover, ran out of options

2 Answers2