個人練習用、h2装飾(上下に短い線)

関連タイピング
-
ワードプレスでよく使う分岐文です。
プレイ回数668長文記号1049打 -
個人練習用:サイトパーツ、アコーディオン
プレイ回数143英語長文1379打 -
自分練習用、英語長文
プレイ回数2092英語長文1127打 -
初心者向けです。
プレイ回数6673英語546打 -
簡単な解説付きでグラデーションをまとめ、個人練習用
プレイ回数485長文645打 -
解説付きでbox-shadowの基本をまとめています。
プレイ回数271長文315打 -
CSSの暗記用です
プレイ回数445英語長文742打 -
TLJ専用のHTML練習用タイピングです。
プレイ回数4304260打
問題文
(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; }