ブログの記事なので読みやすくするために、重要部分に線を引いたり、色を変えたり、太くしたりと色々表現はありますが、最近マーカ風のアンダーラインを引くやり方が多くあります。
今回はいくつかの方法でCSSでマーカー風のアンダーラインを引く方法を解説します。

【1】グラデーションを使う方法（おすすめ度80％）

ブログの記事本文内などで、一番多く使われている手法ですね。
記事本文中の重要ポイントにアンダーラインを引く場合はこれで問題ないと思います。
ただし、書体によっては、太いアンダーラインになる場合があります。
あと、「padding-bottom」の数値が高いと、アンダーラインが下にいってしまい、文字から離れてしまいます。

<p class="under-line01"><b>グラデーションを使ってマーカー風のアンダーラインを引く</b></p>

.under-line01{
  display: inline;
  padding: 0 10px 0;
  background: linear-gradient(transparent 60%, #ffde00 60%);
}

【2】backgroundを使う方法（おすすめ度70％）

グラデーションのアンダーラインと違って、線の太さが画像のサイズ分で固定なので、数値通りの数字になりますが、レスポンシブでスマホ対応させた時は（background-size）を調整する必要があります。
大した容量じゃないんですが、当然画像を使うので、グラデーションで引く場合より容量を食います。

<p class="under-line02"><b>before要素を使ってマーカー風のアンダーラインを引く</b></p>

.under-line02{
  display: inline;
  background: url(img/line-bg.png) repeat-x 0 100% rgba(0, 0, 0, 0);
  padding: 0 10px 0;
}

【3】before要素を使う方法（おすすめ度25％）

疑似要素を使って引くこともできますが、改行した時に下の行にアンダーラインが引かれないので、文章量の多い場合はおすすめしません。

<p class="under-line03"><b>background画像を使ってマーカー風のアンダーラインを引く</b></p>

.under-line03{
  display: inline;
  position: relative;
  padding: 0 10px 0;
  z-index: 0;
}
.under-line03:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
  background-color: #ffde00;
  z-index: -1;
}

全DEMO

マーカー風のラインを引く場合の注意点

アンダーラインを引いたテキストは基本「display: inline;」にしないと改行時に【3】と同現象が起きてしまいますので、注意が必要です。
※「inline-block」「block」どちらもレイアウトが崩れます。
もし改行しないテキストで「display:block;」を指定した場合、【1】のグラデーションでやる場合は「line-height」で行間を調整すると、アンダーラインの高さも調整できます。

基本、グラデーションでやるのが一般的ですが、高さを自分で調整できるbackground画像を使うほうが個人的には好きですかね？
今回は、以上です。