個人練習用、h2装飾（上下に短い線）
beforeとafter要素を使った装飾です。
解説なしです。個人練習用に作りました。
関連タイピング
-
プレイ回数98 英字169打 -
解説なし、個人練習用につくりました。
プレイ回数746 英語長文1054打 -
自作のハンバーガーメニューを作成しましょう！
プレイ回数4405 英語長文721打 -
vue Lifecycle Hooks
プレイ回数270 英語157打 -
日本語訳なしの英語長文です。個人練習用につくりました。
プレイ回数637 英語長文717打 -
jQuery基本例文集です。解説なしです。
プレイ回数1060 英語長文1554打 -
個人練習用：並び変え、間隔の調整、縦方向の揃えなど基本のまとめ
プレイ回数381 英語長文813打 -
自分用transform まとめ
プレイ回数1128 長文英字693打
問題文
ふりがな非表示
ふりがな表示
(h2{ position: relative; display: inline-block;)
h2{ position: relative; display: inline-block;
(margin-bottom: 1em; })
margin-bottom: 1em; }
(h2:before { content: ''; position: absolute;)
h2:before { content: ''; position: absolute;
(left: 50%; top: -15px; display: inline-block;)
left: 50%; top: -15px; display: inline-block;
(width: 60px; height: 5px;)
width: 60px; height: 5px;
(-webkit-transform: translateX(-50%);)
-webkit-transform: translateX(-50%);
(transform: translateX(-50%); background-color: black;)
transform: translateX(-50%); background-color: black;
(border-radius: 2px; })
border-radius: 2px; }
(h2:after { content: ''; position: absolute;)
h2:after { content: ''; position: absolute;
(left: 50%; bottom: -15px; display: inline-block;)
left: 50%; bottom: -15px; display: inline-block;
(width: 60px; height: 5px;)
width: 60px; height: 5px;
(-webkit-transform: translateX(-50%);)
-webkit-transform: translateX(-50%);
(transform: translateX(-50%);)
transform: translateX(-50%);
(background-color: black; border-radius: 2px; })
background-color: black; border-radius: 2px; }