Skip to content

Instantly share code, notes, and snippets.

@Vterebenin
Created July 30, 2019 06:25
Show Gist options
  • Select an option

  • Save Vterebenin/a1f98a3a5fe0d79a4a2c383fe289c63c to your computer and use it in GitHub Desktop.

Select an option

Save Vterebenin/a1f98a3a5fe0d79a4a2c383fe289c63c to your computer and use it in GitHub Desktop.
pretty text underline
.pretty-text-underline {
display: inline;
text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9;
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
}
.pretty-text-underline::-moz-selection {
background-color: rgba(0, 150, 255, 0.3);
text-shadow: none;
}
.pretty-text-underline::selection {
background-color: rgba(0, 150, 255, 0.3);
text-shadow: none;
}
<p class="pretty-text-underline">Pretty text underline without clipping descending letters.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment