CSS疑似要素 :before, :after で作る見出しデザイン　カフェのテント風　もくもく

文字の入っている枠の部分の共通CSS

.box{
	background:#FFBFFF;
	padding:20px;
	font-size:20px;
	line-height:1;
}

　

疑似要素を使って見出しにカフェのテント風の飾りをつける。
（ヘッダーでも使える。）

30pxの正円の画像（https://www.nanairoweb.com/img/20170815_circle.png）を作って、15pxの高さの疑似要素tent1の背景にして使って、くっつけてる。

.tent1:after {
content : "";
display:block;
height:15px;
background: url(https://www.nanairoweb.com/img/20170815_circle.png) repeat-x center bottom;
}

　　
　

使うかわからないけど、飾りを上につけることもできる。

.tent2:before {
content : "";
display:block;
height:15px;
background: url(https://www.nanairoweb.com/img/20170815_circle.png) repeat-x center top;
}

　
　

上下ともつけることもできる。

.tent3:before {
content : "";
display:block;
height:15px;
background: url(https://www.nanairoweb.com/img/20170815_circle.png) repeat-x center top;
}
.tent3:after {
position: relative;	
content : "";
display:block;
height:15px;
background: url(https://www.nanairoweb.com/img/20170815_circle.png) repeat-x center bottom;
}

　
　

バリエーション♪