---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/11(三) 每日任務

## 題目

使用偽元素來做出以下排版


[參考文章1](https://wcc723.github.io/css/2013/09/22/css-pseudo-element/)
[參考文章2](https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html)

需透過 Codepen 繳交 （載入 Bootstrap CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css ）


HTML

<div class="container">
  <div class="row timeline-section">
    <div class="col-4">
      <div class="timeline-pointer">
        <p>確認訂單</p>
      </div>
    </div>
    <div class="col-4">
      <div class="timeline-pointer">
        <p>填寫訂購資訊</p>
      </div>
    </div>
    <div class="col-4">
      <div class="timeline-pointer">
        <p>填寫付款資訊</p>
      </div>
    </div>
  </div>
</div>

CSS

.timeline-section {
	position: relative;
    margin: 30px 0;
}

.timeline-section::after {
	...
	...
	left: 0;    
	right: 0;
	height: 3px; 
	background-color: #E31277;
}

.timeline-pointer{
	position: relative;
  display: flex;
  justify-content: center;
}

.timeline-pointer::before {
	...
	...
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: translate(-50%,-25%);
	background-color: #E31277;
}

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答： [Codepen 範例](https://codepen.io/hexschool/pen/MWpLGYM?editors=1100) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/ZEKeebb
-->

<!-- 1. Alpha
Codepen:https://codepen.io/alphatero/pen/oNWmgdR
-->

<!-- 2. WilsonHan
Codepen:https://codepen.io/wi0821/pen/PomVwdN
-->

<!-- 3.LiShnag
Codepen:https://codepen.io/li-shang/pen/poPGvQp?editors=1100
-->

<!-- 4.黃羽均
Codepen:https://codepen.io/azzfgtpo/pen/LYyqEXo
-->

<!-- 5. Lina Chen
codepen: https://codepen.io/LinaChen/pen/mdmvyoV
-->

<!-- 6. 雷古娜
https://codepen.io/tinahopo/pen/MWmLYBQ -->

<!-- 7. Vic
https://codepen.io/hsuan333/pen/zYwexVy
-->

<!--8. Sam li
codepen:https://codepen.io/sam830623/pen/dyWaPLb
-->

<!--9. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/rNmPaXQ?editors=1100
-->

<!--10. Dory Hung
codepen: https://codepen.io/dorihung/pen/yLbZNNq
-->

<!--11. 陳sam
codepen: https://codepen.io/euldpliv/pen/NWjoqgY
-->

<!-- 12.肉鬆
codepen: https://codepen.io/klrkicog/pen/qBmgdXd
-->

<!-- 13.lumei
codepen: https://codepen.io/l_umei/pen/jOmdPyK
-->

<!-- 14.kevinhes
codepen: https://codepen.io/kevinhes/pen/mdmvJJr
-->

<!--15. 阿和
codepen:https://codepen.io/shnny/pen/VwbgLWj?editors=1100
-->

<!--16. Jean
codepen:https://codepen.io/jean-liu/pen/xxdMGWG
-->

<!--17. 群嘉
condepen:https://codepen.io/efzdamnp-the-lessful/pen/dyWaoYo
-->

<!-- 18. Gill
condepen:https://codepen.io/Gill-Chin/pen/VwbgLMK
-->

<!-- 18. YuriT
condepen:https://codepen.io/wenfisht/pen/GRmzJwO
-->

<!-- 19. huanan
condepen:https://codepen.io/hua_nan/pen/XWROmrm
-->

<!-- 20. Gui
https://codepen.io/guitimliu/pen/RwVvWwx -->

<!-- 21. 大衛
https://codepen.io/exnsrpjc/pen/rNmPVBQ
-->

<!-- 22. curry
https://codepen.io/Ted19851223/pen/bGWzVQb
-->

<!--23. CHeng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/poPLjoG
-->

<!--24. tim Chou
codepen: https://codepen.io/tim-chou/pen/ZEKwQLX
-->

<!--25. Cate Chang
codepen: https://codepen.io/tutz/pen/RwVvrjb
-->

<!--26. Elaine Liu
https://codepen.io/elaine7598/pen/QWvYbXY
-->

<!-- 27. Sz
https://codepen.io/szyln/pen/NWjoNjy
-->

<!-- 28. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/GRWPEGO
-->

<!-- 29. 魚魚
Codepen: https://codepen.io/YuYu_29/pen/BaRMzmb
-->

<!-- 30. una
Codepen: https://codepen.io/xbsapbas-the-vuer/pen/NWjoroW
-->

<!-- 31.阿瓜
https://codepen.io/hoick/pen/qBmLbJe?editors=1100 -->

<!-- 32. pete.chen
codepen: https://codepen.io/JIAN-RONG/pen/OJmdbQO?editors=1100
-->

<!--33. Sihle Huang
code: https://codepen.io/bugbug777/pen/gOWqgjZ?editors=1100
-->

<!-- 34. hellocrab
https://codepen.io/hellocrab/pen/BaRvZOB
-->

<!-- 35. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/WNjPjqY?editors=1100
-->

<!-- 36.黃士桓
codepen: https://codepen.io/shr-huan-huang/pen/XWROgzj
-->

<!-- 37. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/NWjojRw
-->

<!-- 38. Jim Hwang
https://codepen.io/jimh1129/pen/VwbgzXO
-->

<!-- 39. Jessie Cheng
https://codepen.io/JessieMosbi/pen/VwbgMQj
-->

<!-- 40: Sec
https://codepen.io/Sentiments/pen/OJmdzaN
-->

<!-- 41: Erin Huang
https://codepen.io/ErinHuang/pen/JjNxaae
-->

<!-- 42: Riley
https://codepen.io/jjpxbprd/pen/mdmvzrE
-->

<!-- 43: 沈依蓉
https://codepen.io/lily-oa/pen/xxdMyjx
-->

<!--44. Tori
codepen: https://codepen.io/hayen/pen/PomxyRa?editors=1100
-->

<!-- 45. yijun
codepen:
https://codepen.io/sandy3068/pen/dyWaQdZ-->

<!-- 46. KK
codepen:
https://codepen.io/potatokaka/pen/wvdNQOL?editors=1100-->

<!-- 47. ellie
https://codepen.io/hsu-yu/pen/qBmggZz
-->

<!-- 50. 文文
https://codepen.io/chiawen81/pen/eYWxxjo?editors=1100
-->

<!--51. Jun Chan
codepen: https://codepen.io/chujunchan/pen/BaRMEZy?editors=1100
-->

<!-- Hi Annie
https://codepen.io/lhohdalu/pen/mdmoyBY
-->

<!--53. axlrock1021
codepen: https://codepen.io/andy1021/pen/bGWZRjz
-->

<!--54. jimmyFang
codepen: https://codepen.io/pohxiqqo/pen/QWvoQBm
-->

<!--55. anna
codepen: https://codepen.io/annhys/pen/eYWXQbp?editors=1100
-->

<!--56. oober
codepen: https://codepen.io/xtsjrjdv/pen/abWxNoK
-->

<!-- 57. ZOE WU
https://codepen.io/Zoechiueh/pen/ZEKPodv?editors=1100
-->

<!-- 58. Yurie
https://codepen.io/_u_jung/pen/VwbNqWX
-->

<!-- 59.袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/ZEKZVXO?editors=1100
-->

<!-- 60. YOYO
https://codepen.io/lumedkle/pen/jOmRddY
-->

<!-- 61. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/MWmRdyo
-->

<!-- 62.zy codepen:https://codepen.io/zy_c/pen/vYmwZXG -->

<!-- 63. Joe Kuo
codepen: https://codepen.io/alertislow/pen/oNWrjQb
-->

<!-- 64. Alberto
https://codepen.io/AlbertoLL/pen/NWjZpBm
-->

<!-- 65. Sylvia-H
https://codepen.io/Cosmosheart/pen/NWgKaQP?editors=1100 -->

<!-- 66. WA
https://codepen.io/ldddl/pen/bGRboMy
-->

<!-- 67. YJ kung
https://codepen.io/bagelover/pen/JjJjmJK
-->

<!-- 68. AKI
https://codepen.io/akichen27/pen/VwWjjvZ
-->