テキスト下に蛍光色ラインマーカーをCSSで作る（改行対応）

Thu, 31 Dec 2020 00:00:00 +0000

改行されているテキストにも対応できるCSSによるラインマーカーの作成。

以下、コード。

HTML

<p>
  テキストテキストテキストテキストテキスト<br />
  <span class="line-marker">テキストテキストテキストテキストテキスト<br />
    テキストテキスト</span>テキストテキストテキスト<br />
  テキストテキストテキストテキストテキスト
</p>

CSS

.line-marker {
	background: linear-gradient(transparent 70%, #FDDEB3 0%);
	display: inline;
	padding: 0 2px 4px;
}

【初心者向け】SASSについて徹底解説

Thu, 22 Aug 2019 00:00:00 +0000

SASSとは

呼び方は「サス」or「サース」

Syntactically Awesome StyleSheets（シンタクティクリー・オーサム・スタイルシート）の略。CSSのメタ言語（プリプロセッサ）。

Css on POPWEB

テキスト下に蛍光色ラインマーカーをCSSで作る（改行対応）

HTML

CSS

【初心者向け】SASSについて徹底解説

SASSとは