CodePen

HTML

            
              <p>Some <a href="https://medium.com/p/7c03a9274f9">linked</a> text.</p>

<p>I&#8217;m trying to recreate the style of underlines that Marcin Wichary over at Medium <a href="https://medium.com/p/7c03a9274f9">explains here</a>.
  
<p>Try changing the paragraph styles here to see how the underlines react.</p>
            
          
!

CSS

            
              body {
  margin: 2em;
}
p {
  margin: 1em 0;
  font: 1em/1.4 "jaf-bernina-sans", Verdana, sans-serif;
}
a {
  text-decoration: none;
  background-image: linear-gradient(to top,
    rgba(0,0,0,0) 11%,
    rgba(0,0,0,.3) 11%,
    rgba(0,0,0,.3) 16%,
    rgba(0,0,0,0) 16%
    );
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................