CSSだけで作る見出しのデザインサンプルです。
今回は少しかわいいものやポップなものが多いです。
見出しっぽく英字「TITLE」も入れましたが、日本語の「見出しテキスト」単体でも使えます。

ステッチ風

DEMO

Title

HTML

<h2 class="title1"><span class="en">Title</span><span class="jp">見出しテキスト</span></h2>

CSS

.title1 {
	color: #000;
	text-align: center;
}
.title1 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.title1 .jp {
	background: #000;
	border-radius: 20px;
	color: #fff;
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	outline: 1px dashed rgba(255, 255, 255, .8);
	outline-offset: -4px;
	padding: 5px 20px;
	position: relative;
}

リボン風

行数に応じて::before・::afterのborderの高さを調整する必要があります。

DEMO

Title

HTML

<h2 class="title2"><span class="en">Title</span><span class="jp">見出しテキスト</span></h2>

CSS

.title2 {
	color: #000;
	text-align: center;
}
.title2 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.title2 .jp {
	background: #000;
	color: #fff;
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 5px 20px;
	position: relative;
}
.title2 .jp::before {
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: 1em 0 1em 10px; /* em 行数によって変更 */
	content: '';
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.title2 .jp::after {
	border-color: transparent #fff transparent transparent ;
	border-style: solid;
	border-width: 1em 10px 1em 0; /* em 行数によって変更 */
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

プレート風

DEMO

Title

HTML

<h2 class="title3"><span class="en">Title</span><span class="jp">見出しテキスト</span></h2>

CSS

.title3 {
	color: #000;
	text-align: center;
}
.title3 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.title3 .jp {
	border: 1px solid #000;
	border-radius: 20px;
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 5px 20px;
	position: relative;
}
.title3 .jp::before {
	background: #000;
	border-radius: 50%;
	content: '';
	display: block;
	height: 5px;
	left: 7.5px;
	position: absolute;
	top: calc(50% - 2.5px);
	width: 5px;
}
.title3 .jp::after {
	background: #000;
	border-radius: 50%;
	content: '';
	display: block;
	height: 5px;
	position: absolute;
	right: 7.5px;
	top: calc(50% - 2.5px);
	width: 5px;
}

丸と罫線

DEMO

Title

HTML

<h2 class="title4"><span class="en">Title</span><span class="jp">見出しテキスト</span></h2>

CSS

.title4 {
	color: #000;
	text-align: center;
}
.title4 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.title4 .jp {
	border-bottom: 1px solid #000;
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 0 20px 5px;
	position: relative;
}
.title4 .jp::before {
	background: #000;
	border-radius: 50%;
	bottom: -2.5px;
	content: '';
	display: block;
	height: 5px;
	left: 0;
	position: absolute;
	width: 5px;
}
.title4 .jp::after {
	background: #000;
	border-radius: 50%;
	bottom: -2.5px;
	content: '';
	display: block;
	height: 5px;
	position: absolute;
	right: 0;
	width: 5px;
}

リボンのワンポイント

DEMO

Title

HTML

<h2 class="title5"><span class="en">Title</span><span class="jp">見出しテキスト</span></h2>

CSS

.title5 {
	color: #000;
	text-align: center;
}
.title5 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.title5 .jp {
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 20px 20px 0;
	position: relative;
}
.title5 .jp::before {
	border-color: transparent transparent transparent #000;
	border-style: solid;
	border-width: 5px 0 5px 10px;
	content: '';
	left: calc(50% - 10px);
	position: absolute;
	top: 5px;
	transform: translateY(-50%);
}
.title5 .jp::after {
	border-color: transparent #000 transparent transparent;
	border-style: solid;
	border-width: 5px 10px 5px 0;
	content: '';
	position: absolute;
	right: calc(50% - 10px);
	top: 5px;
	transform: translateY(-50%);
}

斜線ボーダー背景

DEMO

Title

HTML

<h2 class="title6"><span class="en">Title</span><span class="jp">見出しテキスト</span></h2>

CSS

.title6 {
	color: #000;
	text-align: center;
}
.title6 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.title6 .jp {
	background: repeating-linear-gradient(-45deg,  transparent 0 5px, #eee 5px 10px);
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 5px 20px;
}

上下にドット線

DEMO

Title

HTML

<h2 class="title7"><span class="en">Title</span><span class="jp">見出しテキスト</span></h2>

CSS

.title7 {
	color: #000;
	text-align: center;
}
.title7 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.title7 .jp {
	border-bottom: 2px dotted #000;
	border-top: 2px dotted #000;
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 5px 20px 5px;
	position: relative;
}

2重囲み枠

DEMO

Title

HTML

<h2 class="title8"><span class="en">Title</span><span class="jp">見出しテキスト</span></h2>

CSS

.title8 {
	color: #000;
	text-align: center;
}
.title8 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.title8 .jp {
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 10px 20px;
	position: relative;
}
.title8 .jp::before {
	border: 1px solid #000;
	border-radius: 5px;
	content: '';
	display: block;
	height: 100%;
	left: 5px;
	position: absolute;
	top: 0;
	width: calc(100% - 10px);
}
.title8 .jp::after {
	border: 1px solid #000;
	border-radius: 5px;
	content: '';
	display: block;
	height: calc(100% - 10px);
	left: 0;
	position: absolute;
	top: 5px;
	width: 100%;
}

チェック柄背景

DEMO

Title

HTML

<h2 class="title9"><span class="en">Title</span><span class="jp">見出しテキスト</span></h2>

CSS

.title9 {
	color: #000;
	text-align: center;
}
.title9 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.title9 .jp {
	background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(204,204,204, .4) 5px 10px),
	repeating-linear-gradient(-45deg, transparent 0 5px, rgba(204,204,204, .4) 5px 10px);
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 5px 20px;
}

折り返しリボン

DEMO

Title

HTML

<h2 class="title10"><span class="jp">見出しテキスト</span><span class="en">Title</span></h2>

CSS

.title10 {
	color: #000;
	text-align: center;
}
.title10 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-top: 5px;
	text-transform: uppercase;
}
.title10 .jp {
	border: 1px solid #000;
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	margin-bottom: 10px;
	padding: 5px 20px;
	position: relative;
}
.title10 .jp::before {
	border-color: transparent #000 transparent transparent ;
	border-style: solid;
	border-width: 0 10px 10px 0;
	bottom: -1em;
	content: '';
	left: -1px;
	position: absolute;
	transform: translateY(-50%);
}
.title10 .jp::after {
	border-color: transparent transparent transparent #000;
	border-style: solid;
	border-width: 0 0 10px 10px;
	bottom: -1em;
	content: '';
	position: absolute;
	right: -1px;
	transform: translateY(-50%);
}