# Chapter2 演習問題3

もっと見る

## 問題１

以下のようにする

ヒント

- 疑似要素、:before :afterを使う
- 手順①：
    ボタンaタグの右に60px余白を開ける
- 手順②：
    :beforeで幅30px、高さ1px、背景色#fffの横線をつくる
    positionはabsoluteを指定
    疑似要素のコンテンツは何も指定しない(content: "")
    横線の位置はtop、rightで調整
- 手順③：
    :afterで幅8px、高さ8px、背景色#fffの■をつくる
    border-radiusで角を丸くして●にする
    positionはabsoluteを指定
    contentはテキストなし(content:"")
    ●の位置はtop、rightで調整
- 手順④：
    :hoverでマウスを重ねた時、背景色が変化する動きをつけてみよう

## 回答例