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

背景
投稿者投稿者ueshin0620いいね0お気に入り登録
プレイ回数289難易度(4.2) 517打 英語
beforeとafter要素を使った装飾です。
解説なしです。個人練習用に作りました。

関連タイピング

問題文

ふりがな非表示 ふりがな表示

(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; }

ueshin0620のタイピング

オススメの新着タイピング

タイピング練習講座 ローマ字入力表 アプリケーションの使い方 よくある質問

人気ランキング

注目キーワード