CSSだけで作る見出しのデザインサンプルです。
見出しっぽく英字「TITLE」も入れましたが、日本語の「見出しテキスト」単体でも使えます。

角括弧

DEMO

Title

HTML

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

CSS

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

両端に横線

DEMO

Title

HTML

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

CSS

.title2 {
	text-align: center;
}
.title2 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	text-transform: uppercase;
}
.title2 .jp {
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 0 30px;
	position: relative;
}
.title2 .jp::before {
	background: #000;
	content: '';
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	top: 50%;
	width: 20px;
}
.title2 .jp::after {
	background: #000;
	content: '';
	display: block;
	height: 1px;
	position: absolute;
	right: 0;
	top: 50%;
	width: 20px;
}

両端に斜線

DEMO

Title

HTML

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

CSS

.title3 {
	text-align: center;
}
.title3 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	text-transform: uppercase;
}
.title3 .jp {
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 0 25px;
	position: relative;
}
.title3 .jp::before {
	background: #000;
	content: '';
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: rotate(-45deg);
	width: 20px;
}
.title3 .jp::after {
	background: #000;
	content: '';
	display: block;
	height: 1px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: rotate(-45deg);
	width: 20px;
}

背景に薄い丸

DEMO

Title

HTML

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

CSS

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

両端に横線＆囲み線

DEMO

Title

HTML

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

CSS

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

上に横線

DEMO

Title

HTML

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

CSS

.title6 {
	text-align: center;
}
.title6 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	text-transform: uppercase;
}
.title6 .jp {
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 20px 20px 0;
	position: relative;
}
.title6 .jp::before {
	background: #000;
	content: '';
	display: block;
	height: 1px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 10px;
	width: 20px;
}

上に網掛け

DEMO

Title

HTML

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

CSS

.title7 .jp::after{width: 100%;}にすると横幅いっぱいの網掛けになります。

.title7 {
	text-align: center;
}
.title7 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	text-transform: uppercase;
}
.title7 .jp {
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 20px 20px 0;
	position: relative;
}
.title7 .jp::after {
	background: repeating-linear-gradient(45deg, #000 0px, #000 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%) left center / 5px 5px,
	repeating-linear-gradient(135deg, #000 0px, #000 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%) left center / 5px 5px;
	content: '';
	height: 5px;
	left: calc(50% - 10px);
	position: absolute;
	top: 8px;
	width: 21px;
}

上に丸2つ

DEMO

Title

HTML

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

CSS

::beforeか::afterのどちらかの色を変えるとアイコンっぽくなります。

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

吹き出しのような斜線

DEMO

Title

HTML

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

CSS

.title9 {
	text-align: center;
}
.title9 .en {
	display: block;
	font-family: serif;
	font-size: 48px;
	letter-spacing: .25em;
	line-height: 1;
	margin-top: 5px;
	text-transform: uppercase;
}
.title9 .jp {
	display: inline-block;
	font-size: 16px;
	line-height: 1.25;
	padding: 0 25px;
	position: relative;
}
.title9 .jp::before {
	background: #000;
	content: '';
	display: block;
	height: 1px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
	width: 20px;
}
.title9 .jp::after {
	background: #000;
	content: '';
	display: block;
	height: 1px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: rotate(-45deg);
	width: 20px;
}

吹き出し風の線

DEMO

Title

HTML

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

CSS

.title10 {
	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-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #000; /* 吹き出しの三角形部分 */
	bottom: -10px;
	content: '';
	height: 0;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 0;
}
.title10 .jp::after {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff; /* 吹き出しの三角形部分 */
	bottom: -9px;
	content: '';
	height: 0;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 0;
}