owned this note changed a month ago
Published Linked with GitHub

🏅 切版任務 Day21 - 偽元素練習

偽元素介紹

偽元素(pseudo-element)是一種用來針對元素的特定部分進行樣式設定的方法。
它看起來像是新增了額外的 HTML 標籤,但實際上並沒有真正改變 HTML 結構。

常見用途包括:

  • 在元素前後加裝飾(像小圖示、引號)
  • 美化文字的首行或首字
  • 做一些細部排版

注意,content 是必填的,不然偽元素不會顯示

比較常見的偽元素有下面這幾個:

  1. ::before 在元素內容前面插入內容
  2. ::after 在元素內容後面插入內容
  3. ::placeholder 針對表單輸入框的提示文字設定樣式

另外也可以利用偽元素的方式去產生出線條,下面的題目也請同學練習看看唷!

題目

複製此 CodePen 模板,並且替 .card-title 利用偽元素的方式加上線條。如下圖所示:

image

回報流程

  1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
    (也可以將答案直接貼至「回報區」)

回報區

報數 Discord 名字 Codepen/其他回饋
01 Hank_08123 Codepen
02 Saika Codepen
03 Dean Codepen
04 akkk Codepen
05 kelsonhouse Codepen
06 ying Codepen
07 Joseph_Kyuu Codepen
08 NAOJUN Codepen
09 pastor Codepen
10 Aoi Codepen
11 謝天 Codepen
12 4chan Codepen
13 stone Codepen
14 Yu(light_2020_03026) Codepen
15 JHT Codepen
16 An Codepen
17 B Codepen
18 oyll Codepen
19 RUDY Codepen
20 登登登 Codepen
21 Klaus Chen Codepen
22 柔術小子 Codepen
23 阿龍 Codepen
24 Katie Codepen
25 nora_zizi Codepen
26 Hugh Codepen
27 7Lun Day-21 Codepen
28 Min Codepen
29 WEIWEI Codepen
30 Chuang Codepen
31 ggininder Codepen
32 力文 Codepen
33 zhe Codepen
34 cks40660 Codepen
35 WAWATA Codepen
36 andy Codepen
37 Lanmei Codepen
38 蛋殼 Codepen
39 carrie0416 Codepen
40 Cyan66 Codepen
41 HawkeyeLin Codepen
42 Zing Codepen
43 Melanie Codepen
44 Daniel Haung Codepen
45 jingle0900 Codepen
46 DD Codepen
47 Chia__ Codepen
48 Aidd. Codepen
49 kururu110 Codepen
50 Ariel Codepen
51 小趴 Codepen
52 tina01170 Codepen
53 Codepen
54 Michelle Codepen
55 消波塊 Codepen
56 wei_0982 Codepen
57 Jane Codepen
58 Jessie_Yu Jessie_Yu 的 Codepen
59 kent_31665 Codepen
60 Leonard Codepen
61 William Hsieh Codepen
62 mercury2508. Codepen
63 禹成林 Codepen
64 Astrid 6/7
65 haohaoliao Codepen
66 ann.328 Codepen
67 JiaMori Codepen
68 Rogan Codepen
Select a repo