下線+矢印

目的

• 下線に矢印のような装飾でアクセントを付けたい。

実行結果

サンプルテキスト

解説

• シンプルな下線にアクセントを付けたい時にオススメ。

HTML

<h6 class="layout_2_4"><span>サンプルテキスト</span></h6>

CSS

.layout_2_4 {
	width: 92%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}

.layout_2_4 > span {
	font-size: 18px;
	font-weight: bold;
	display: inline-block;
	position: relative;
	padding-top: 0px;
	padding-right: 25px;
	padding-bottom: 0px;
	padding-left: 5px;
}

.layout_2_4 > span:before {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	border-bottom: solid 20px green;
	border-right: solid 20px transparent;
	bottom: -1px;
	right: 0;
}

.layout_2_4 > span:after {
	content: '';
	width: calc(100% - 15px);
	border-bottom: solid 3px green;
	position: absolute;
	bottom: -1px;
	left: -5px;
}

• テキストの左右の余白調整は19行目と21行目の値を変更してください。

.layout_2_4 {
	width: 92%;
	padding-top: 0%;
	padding-right: 0%;
	padding-bottom: 0%;
	padding-left: 0%;
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: 2%;
	margin-left: auto;
}

.layout_2_4 > span {
	font-size: 16px;
	font-weight: bold;
	display: inline-block;
	position: relative;
	padding-top: 0px;
	padding-right: 25px;
	padding-bottom: 0px;
	padding-left: 5px;
}

.layout_2_4 > span:before {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	border-bottom: solid 20px green;
	border-right: solid 20px transparent;
	bottom: -1px;
	right: 0;
}

.layout_2_4 > span:after {
	content: ''; 
	width: calc(100% - 15px); 
	border-bottom: solid 3px green;
	position: absolute;
	bottom: -1px;
	left: -5px;
}

• スマホ版の解説内容はPC版と同じなので、PC版をご覧ください。