ブログ運営 ワードプレス編 当ブログで使用している見出しの追加CSSについて

Tweet

Pocket

本記事では、当ブログ（万年平社員が勇者を目指すブログ）にて使用している見出しの追加CSSについてお伝えします。
以下にコードを記載いたしますので、参考になれば幸いです。

見出し2

h2 {
border-bottom: 3px solid #C0C0C0;
}

h2::after {
position: absolute;
content: ” “;
display: block;
border-bottom: solid 3px #000fff;
bottom: -3px;
width:15%;
}

h2 {
position: relative;
padding-left: 18px;
font-size:20px;
color: #000000;
}
h2::before,
h2::after{
content: “□”;
position: absolute;
}
h2::before{
left:0;
top:-3px;
}
h2::after{
left: 5px;
top: 3px;
color: #A1B8D1;
}

h2 {
position: relative;
border-bottom: 3px solid #c0c0c0;
}

h2 {font-weight:500;
}

見出し3

h3 {
position: relative;
padding-left: 23px;
font-size:20px;
color: #000;
}

h3::before,
h3::after{
content: “*”;
position: absolute;
}

h3::before{
left:0;
top:-3px;
}

h3::after{
left: 5px;
top: 3px;
color: #A1B8D1;
}

h3 {font-weight:500;
}

ブログ運営に関する他の記事はこちら

ブログ運営に関する疑問集 | 万年平社員が勇者を目指すブログ (hiragushi.com)