tksptan https://blog.hatena.ne.jp/tksptan/ ねこさんとへびさんの新人技術ブログ https://tkstudy.hateblo.jp/ CSS よく見かける、テキストに蛍光マーカー風のラインを引くCSSを作ってみました。See the Pen marker-css by hebisan (@climbFrog) on CodePen. 今回は見出しになるように、ライン幅を広めにとってます。 下左右にラインがはみ出して見えるように、paddingで余白を指定。 .marker{ display: inline; font-weight: bold; padding: 0 10px 2px 10px; } 続いて肝心のマーカー風の仕方。 ここテストでるぞ～ この背景色の幅を半分ほどにできればマーカーっぽくなりそうですね。 半分ほどにするに… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftkstudy.hateblo.jp%2Fentry%2F2018%2F05%2F30%2F191019" title="Memo!テキストのマーカー風の線を引く - CSS - ねこさんとへびさんの新人技術ブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2018-05-30 19:10:19 rich https://tkstudy.hateblo.jp/entry/2018/05/30/191019 1.0 100%