蛍光ペンで線を引いたような見出し

linear-gradient を利用する
上半分を透明、下半分を不透明度50％

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>蛍光ペンで線を引いたような見出し</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>ゆく河の流れは絶えずして、しかももとの水にあらず。</h1>
</body>
</html>

@charset "UTF-8";

/* ----------------------------------------
  reset
---------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ----------------------------------------
  body
---------------------------------------- */
body {
  color: #333;
  font-size: 16px;
  font-family: 
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height: 1.0;
}

/* ----------------------------------------
  layout
---------------------------------------- */
h1 {
  display: inline-block;
  background-image: linear-gradient(transparent 50%, #ff6 50%);
  padding-bottom: .25em;
}