-3

I'm trying to accomplish this underline style but everything I try isn't working. Here's the link to the actual website I found this on. https://www.timeout.com/newyork/music/best-music-videos-of-all-time

enter image description here

Aniket G
  • 3,471
  • 1
  • 13
  • 39
Sheena Armstrong
  • 3
  • 1
  • 4
    What have you tried so far? – Matt Apr 11 '19 at 00:51
  • you can add a div under the words and give it a `margin-top: -10` or some other negative value instead of using a border – Abdul Ahmad Apr 11 '19 at 00:52
  • On that site, it's a child element of an `

    ` and it has `background-image: linear-gradient(to right, rgba(211,26,34,0.5) 0%, rgba(211,26,34,0.5) 100%); background-position: 0 0.84em; background-repeat: repeat-x; background-size: 1px 15px;` [Like so](https://jsfiddle.net/yfg6ec5a/). See the highly useful [Chrome Web Developer Tools - Viewing And Changing CSS](https://developers.google.com/web/tools/chrome-devtools/css/).

     – showdev Apr 11 '19 at 01:04

2 Answers2

0

Generally it's best to show us what you've tried so we can help you understand the concept or correct any mistakes you made. The idea is to have the text with another element below it that has a negative top margin. There are other approaches to accomplish the same thing, each approach will have it's use case and pros/cons.

The concept looks like this in code:

.border-bottom {
  width: 100%;
  height: 10px;
  background-color: red;
  margin-top: -30px;
}
<div>
  <h2>
    bla bla bla
  </h2>
  <div class='border-bottom'>
  
  </div>
</div>
Abdul Ahmad
  • 9,673
  • 16
  • 64
  • 127
0

You can accomplish this look with a pseudo element by positioning it at the bottom of the "parent" element and setting it's z-index to -1.

See here: https://codepen.io/anon/pen/JVNjLX

.link {
  position: relative;
  font-family: Roboto, sans-serif;
  font-weight: 900;
  font-size: 32px;
  text-decoration: none;
  color: #333;
  display: inline-block;
}

.link::before {
  content: "";
  width: 100%;
  height: 16px;
  background-color: pink;
  display: block;
  position: absolute;
  bottom: 2px;
  z-index: -1;
  
}
<a class="link" href="#0">
  Radiohead, Karma Police
</a>

Of course, you can play around with the values to get exactly the look you're after and even animate the pseudo element on hover, etc.

The website you referenced actually accomplishes this effect with a gradient background image on the element. Pretty slick.

You can check that out in action here: https://codepen.io/anon/pen/ZZKEwE

Donkey Shame
  • 754
  • 3
  • 18