見出しのデザイン CSS

デザインテーマ「Minimal Green」の見出しのデザインh1からh4までのCSS

h1見出し

.entry-content h1 {
  font-size: 160%;
  padding: .75em 0;
	border-top: 2px solid #454545;
	border-bottom: 2px solid #454545;
}

h2見出し

.entry-content h2 {
  font-size: 150%;
  padding: .5em .75em;
  background-color: #f6f6f6;
  border-left: 6px solid #47a89c;
}

h3見出し

.entry-content h3 {
  font-size: 140%;
	position: relative;
  padding: .25em 0 .5em .75em;
  border-left: 3px solid #47a89c;
}
.entry-content h3::after {
  position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 2px solid #454545;
}

h4見出し

.entry-content h4 {
  font-size: 130%;
	position: relative;
	padding: 0 .5em .5em 2em;
	border-bottom: 2px solid #454545;
}
.entry-content h4::before,
.entry-content h4::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
.entry-content h4::before {
	top: .2em;
	left: .2em;
	z-index: 2;
	width: 18px;
	height: 18px;
	background: #47a89c;
}
.entry-content h4::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	background: #C2E0CB;
}