<div>
  <p class="under-naname">テキストに<span>斜め背景</span>の下線
  </p>
</div>
<div>
  <p class="under-naname-thin">テキストに<span>斜め背景</span>の下線</p>
</div>
/* 色を変更 */
.under-naname span {
  display: inline-block;
  min-height: 1em;
  line-height:1.3;
  position: relative;
  z-index: 10;
}
.under-naname span::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(-45deg, #ff1481 0%, #ff1481 25%, #9ee1ff 25%, #9ee1ff 50%, #ff1481 50%, #ff1481 75%, #9ee1ff 75%, #9ee1ff 100%)repeat fixed;
  background-size: 10px 10px;
  z-index: -1;
}

/* 細め、角度を変更 */
.under-naname-thin span {
  display: inline-block;
  min-height: 1em;
  line-height:1.3;
  position: relative;
  z-index: 10;
}
.under-naname-thin span::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(-35deg, #ff1481 0%, #ff1481 20%, #9ee1ff 20%, #9ee1ff 50%, #ff1481 50%, #ff1481 70%, #9ee1ff 70%, #9ee1ff 90%, #ff1481 100%)repeat fixed;
  background-size: 12px 8px;
  z-index: -1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.