CSS Text Shadow

by Jens Kühn

HTML

<h2 class=underline>sssssssssssssssssssssssssssss</h2>

CSS

body {
  margin: 0;
  color: white;
  background: black;
  font-size: 10pt;
  text-align: center;
  font-family: sans-serif;
}

/* Underline Text Shadow */
.underline {
  font-family: 'Catamaran', sans-serif;
  margin: 0;
  display: inline-block;
  position: relative;
}
.underline:after {
  content: '';
  position: absolute;
  display: block;
  height: .35em;
  width: 120%;
  margin-left: -60%;
  left: 50%;
  bottom: -.35em;
  border-radius: 50%;
  z-index: -1;
  background: black;
}
.underline:before {
  content: '';
  position: absolute;
  display: block;
  height: .3em;
  width: 110%;
  margin-left: -55%;
  left: 50%;
  bottom: -.22em;
  border-radius: 50%;
  z-index: -2;
  background: white;
  background: linear-gradient(to right, white 25%,black 100%);
}