or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Do you want to remove this version name and description?
Syncing
xxxxxxxxxx
🏅 切版任務 Day21 - 偽元素練習
偽元素介紹
偽元素(pseudo-element)是一種用來針對元素的特定部分進行樣式設定的方法。
它看起來像是新增了額外的 HTML 標籤,但實際上並沒有真正改變 HTML 結構。
常見用途包括:
注意,content 是必填的,不然偽元素不會顯示
比較常見的偽元素有下面這幾個:
::before
在元素內容前面插入內容::after
在元素內容後面插入內容::placeholder
針對表單輸入框的提示文字設定樣式另外也可以利用偽元素的方式去產生出線條,下面的題目也請同學練習看看唷!
題目
複製此 CodePen 模板,並且替 .card-title 利用偽元素的方式加上線條。如下圖所示:
回報流程
(也可以將答案直接貼至「回報區」)
回報區