見出しやリストマークを疑似要素before、afterを使って装飾する

  • 2018.09.04
  • 2018.11.06
  • CSS
見出しやリストマークを疑似要素before、afterを使って装飾する

自分の作業の忘備録のため、疑似要素を使った装飾を書いていきます。
別に、ここに書かなくてもいいけどね!!

「arrow」というクラスを与えたところに、疑似要素のbeforeとafterを使い標示させていきます。

HTML
<div class="arrow">テキスト</div>

リストマークやポイントに三角マーク

ノーマルリストマーク

シンプルな三角です。

CSS
.arrow{
	position: relative;
	padding: 0 0 0 16px;
}
.arrow::before{
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	box-sizing: border-box;
	border: 5px solid transparent;
	border-left: 8px solid #555;
}

下向きの三角

こんな感じの。

CSS
.arrow{
	position: relative;
	padding: 0 0 0 16px;
}
.arrow::before{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 8px;
	bottom: 0;
	left: 0;
	border: 6px solid transparent;
	border-top: 7px solid #555;
}

丸で囲んだリストマーク

表示イメージはこんな感じです。

CSS
.arrow{
	position: relative;
	padding: 0 0 0 16px;
}
.arrow::before{
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	box-sizing: border-box;
	border: 5px solid transparent;
	border-left: 8px solid #555;
	z-index: 2;
}
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: -6px;
	margin: auto;
	content: "";
	width: 16px;
	height: 16px;
	border: 1px solid #555;
	border-radius: 9px;
	background: #FFF;
	z-index: 1;
}

次へなどに使う「く」の字、大なり小なり

よく見るこんな奴です。

大なり「>」

CSS
.arrow{
	position: relative;
	display: inline-block;
}
.arrow::after{
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-top: solid 1px #555;
	border-right: solid 1px #555;
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: -20px;
}

 

小なり「<」

CSS
.arrow{
	position: relative;
	display: inline-block;
}
.arrow::after{
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-top: solid 1px #555;
	border-right: solid 1px #555;
	transform: rotate(225deg);
	position: absolute;
	top: 50%;
	right: -20px;
}

下向きにしたい場合は「transform: rotate(225deg);」を「transform: rotate(135deg);」に変えるだけです。

コメント等に吹き出し

表示イメージはこんな感じです。

CSS
.fuki{
	position: relative;
	background: #EEE;
	padding: 15px;
	border-radius: 5px;
	margin-bottom: 20px;
}
.fuki:before{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top: 15px solid #EEE;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
}

まとめ

個人的に上記のCSS以外に、たまーに下記のジェネレーターを使ったりもしてます。
http://apps.eky.hk/css-triangle-generator/ja

今更、書く事ではないぐらいいろんなサイトでも紹介されてるCSSを使った装飾ですが、個人的な忘備録も含めて書きました。
今思えば疑似要素という魅力あふれるキーワード。
何事にも頭に「疑似」ってつけたら、ワクワクとドキドキが止まらないのは僕だけでしょうか?
疑似体験。
疑似お母さん。
疑似体験お母さん。

騙されないように気を付けましょう。

このブログを購読する

当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可を押してください。
押してやってください。
ブログ更新後、ブラウザより更新通知が送られます。