以前我還沒開始經營部落格之前，無論學生時期或在職場上籌劃活動，對我來說，就只是憑感覺盡量寫出讓人有感的文字而已。

直到有次和朋友一起籌劃活動時他跟我說：「你文案超強！」
當時我還滿頭問號想說，什麼是文案啊？
我還特地請教Google大神，才發覺原來寫出讓人有感的文字這一點，就已經是文案撰寫的一環了！

這一篇讓我用最簡單的切入點，帶大家了解文案是怎麼一回事，以及為什麼我認為無論你從事哪個行業，文案都相當重要的原因吧！

文案 是什麼？

簡單來說，文案就是運用文字，快速帶領他人進入你希望讓他了解的情境。

既然是要帶領他人進入一個情境，這邊可以分成兩種類型的文案 – 簡短或長篇。

簡短類型的文案

如果是想要撰寫盡量簡短的文案，例如活動Banner、網頁輪播圖上的文字、商業廣告圖文等。

簡短類型在短短幾行內就要完成的文案，對於抓準目標客群內心是非常重要的。

因為如果沒有精準地觸及到目標客群的心，沒有讓他們感受到「我也是！」的想法，以現在資訊量相當大的網路或現實世界，都很難讓人停留下來，而是會過目即忘。

長篇類型的文案

相對前述簡短的文案，這邊說的是例如網紅接的業配文、商業影片、業配影片等，甚至部落格撰寫也可以算是一種。

而長篇類型的文案更注重在氛圍的建構，運用故事的方式，或一些變化型如劇本三幕劇的形式、演講架構的模式等，快速讓閱讀的人進入情境！

為什麼大家都應該學會寫文案？

文案的重要性

無論你的所在產業為何，只要你的產業需要行銷、宣傳、舉辦主題活動或抽獎，甚至你自己想要接業配等，都需要圖文宣傳！

雖然現在早已進入影音時代，難道影音就不需要撰寫文案了嗎？

其實在製作說明影片或旁白類型的動畫時，我們都需要去思考，影片的剪輯順序如何安排、文字描述是否吸引人，這些也都是需要文案技巧的噢！

文案的安排

例如當我們替某些活動製作影片宣傳有多重優惠時，在文案上通常會用「而且…」、「甚至…」、「還有、還有…」等銜接詞，讓人有多重優惠層層堆疊的感覺，就是一種文案的安排。

又或是例如你自己經營網路商城，想要製作廣告圖片時，就算是用近期興起的Canva軟體直接速成廣告圖，必定仍然需要改變圖片上的文案內容吧！

因此就算現在有再怎麼方便的剪輯軟體或圖片軟體，文案是目前無法被省略或取代的能力噢！

文案撰寫的準備方向

因此我們準備寫文案的時候，可以從兩個面向來做準備，這樣就能更精準達到我們想要的效果。

1. 理解觀看者的喜好、需求
2. 清楚你希望讓觀看者做出什麼下一步的行為

1.理解觀看者的喜好、需求

通常我們在思考我們的目標客群時，會簡單地描繪出目標客群會有的樣子，從他們的年齡、職業、興趣等各方面去模擬，雖然是虛構而且是想像出來的，但其實相當有助於我們未來在撰寫文案、投放廣告的方向！

這就像撰寫劇本前，創建虛擬人物一樣，會先將人物的個性、身世背景、遇到事情的心態等設定出來，更專業的人物設定甚至會將這些內容，通通撰寫成一個人物小傳。

撰寫文案前，如果有先設想出目標客群的模樣，在寫文案的過程中，更可以有依據去撰寫出可以打動他們內心的文案！

2.清楚你希望讓觀看者做出什麼下一步的行為

撰寫文案的目的，例如希望觀看者能點擊網站連結、分享文章抽獎、購買商品等，我們要先清楚自己希望他們可以在看完文案後做出什麼樣的行為，更可以在文案最後的行動呼籲CTA完成設計。

這樣一來，當我們成功引導觀看者做出下一步行為之後，就可以讓他們進入我們給予的情境中，一步步達到我們期望的目的。

學會文案的第一步

如果還是覺得文案好難、好複雜，那我可以給予你們建議的第一步就是，平常心看待你的文字！

主要是讓你自己同理你的目標客群，以他們的視角出發，並撰寫能快速讓他們進入的情境，你就成功一半了。

文案在思考的過程雖然相當專業，但文案說穿了就是一種構思過的文字！你也一定可以寫出好文案！

總結

好的文案甚至可以創造品牌形象，讓你從企業品牌到產品能同時提升好印象！

想要寫出好的文案，就從不斷的練習開始，即便一開始只有一兩句，即便一開始抓不太到目標客群心理，但相信只要經過練習，人人都可以學會寫文案！

• 為何活動回流率超低？辦活動應該懂的目標客群心理
• 辦活動需要什麼？從無到有的辦活動籌備項目大公開
• 活動企劃實戰！運用手遊與桌遊輔助實體活動設計

還不知道怎麼使用CSS的position相對位置屬性可以按下方連結延伸閱讀，讓你的偽元素應用更廣泛呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

這裡跟各位讀者聊一下我當初在學習偽元素的經歷，當時自學CSS之後，對於偽元素其實並沒有碰過，學習的課程中也完全沒有提過這個方法。

於是當我到職場上，發現這個東西的時候，一開始只覺得好像很神奇，可以透過CSS就完成增加文字內容在段落前後，完全不用去改HTML或內文。

但後來發現怎麼有些標題附近的裝飾，好像也是用偽元素做出來的！？

於是開始研究怎麼生出那些東西，這完全考倒我了，我花了超級大把的時間爬文試圖了解這個東西！
但我無論怎麼研究，就是各種卡關，很多網站的程式碼範例是已經簡化、合併過的，讓我反而越來越搞不清楚到底如何使用它。

今天這篇文章，帶你從頭了解一次，並且用最簡單的範例，實作出加入內文的程式碼，以及實作當時我搞不懂的標題裝飾！

也強烈建議大家一邊實作，讓自己慢慢體會這個概念，最後這技巧才會是你的呦！

初學偽元素::before和::after

什麼是「偽元素」？

「偽元素」英文是「Pseudo」，可以用CSS「憑空創造」一個區塊出來，而且在HTML程式碼後台你並不會看到它存在，但在網頁F12開發人員工具時可以看到。

偽元素實作上常用的有::before、::after、::selection三種，而你會看到它們都有兩個冒號開頭，這跟:hover、:active等操作型的偽類做出區別。

雖然據說有些比較沒有習慣這樣區分的工程師不小心只使用了一個冒號，執行上好像也有成功，但養成好的習慣，也是避免未來程式需要花更多時間debug的好方法噢！

「偽元素」如何運作的？

這個東西簡易來說，是一個可以讓你僅透過CSS檔案，就能增加東西在HTML內文的方式。

實務應用上除了加入文字內容，還能增加各種不同的東西在畫面上，也可以搭配position屬性，讓你增加的東西漂浮在頁面任何你希望他存在的位置呦！

聽起來超厲害的吧！
這邊就透過範例來說明囉！

偽元素::before和::after實作範例

HTML基本設定

想一步一步搞懂的大家，也建議可以直接開啟你的編輯器，懶得打程式碼的話，就算是複製貼上看看效果也好，只有把範例看過去的話有時候也比較難吸收呦！

<!-- HTML -->

<div class="intro">我是艾咖Aikko！</div>

CSS我們先留空，HTML用一個<div>標籤寫下自我介紹，並且給予它一個class當作等等要在CSS使用的樣式名稱。

上方程式碼的結果會顯示這樣：

加上CSS偽元素

接下來我們試著加上偽元素::before和::after的CSS吧！

/* CSS */

.intro::before{
  content: "嗨！大家好，"; /*加入這些內容在整個<div>的前面*/
  color: blue; /*字體為藍色*/
}

.intro::after{
  content: "請多指教！"; /*加入這些內容在整個<div>的後面*/
  color: green; /*字體為綠色*/
}

::before就是可以將創建的內容直接放在整塊<div>標籤內容的前面；
::after則是放在後面，想加入的文字內容可以直接放在content的屬性當中，呈現結果如下：

用顏色區分就更清楚了，有沒有發現HTML內容完全不用變更，靠著CSS就能加入內容到HTML，完全是我這種底層工程師改不到HTML時的福音啊！

到這裡，你已經學會最簡易的偽元素應用了，趕緊消化練習一下，緊接著我們讓它有更廣泛的應用吧！

偽元素::before或::after輕鬆完成網頁的點綴和線段

網頁的點綴和線段範例

實際到Pinterest找一個有所謂的標題旁點綴元素，像下圖中”HOME >> 99 INSPIRATIONAL…”那段下方橘色長方體，這就可以用偽元素將它製造出來：

配合相對位置設定，偽元素隨你放！

還不清楚相對位置position的relative和absolute如何設定嗎？
建議先到下方文章練習看看比較容易看得懂呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

那我們將剛剛的HTML改成圖片上的那串英文，並先將CSS留空：

<!-- HTML -->

<div class="intro">HOME >> 99 INSPIRATIONAL WEBSITE DESIGN TEMPLATES FOR 2020</div>

呈現如下：

接下來我們將CSS部分完成：

這裡先來個小提醒，就算沒有使用到content屬性，也一定要寫這個屬性，content屬性和::before、::after是生命共同體！
雙引號內容留空也沒關係，但是不寫的話就不會有作用呦！

/* CSS */

/*那整塊<div>標籤*/
.intro{
  position: relative; /*將整塊<div>當作基準位置*/
  width: 516px; /*設定寬度，讓偽元素的寬度直接設100%*/
}

/*新增的偽元素*/
.intro::before{
  content: ""; /*沒用到仍然要寫，雙引號內容留空*/
  width: 100%; /*設定長方形寬度*/
  height: 10px; /*設定長方形高度*/
  background: #ff7600; /*設定長方形顏色*/
  position: absolute; /*設定與<div>區塊的相對位置*/
  left: 0px; /*從<div>區塊左上角起算，與左邊距離為0，即靠左的意思*/
  top: 100%; /*從<div>區塊左上角起算，與上方距離為100%時才開始產生這個長方形，因此長方形會在整塊<div>區塊的下方*/
}

完成樣式如下：

超快速的吧！

到這邊雖然已完成，但也許你心中會有幾個疑惑，我來為大家解答一下。

解決你內心的疑惑

第一個疑惑：
那如果是用::after來寫的話可以嗎？
答案是當然可以！

因為一旦使用了position相對位置屬性後，就直接擺脫了你加的內容是要放在後面還是前面，而是直接按照position相對位置的設定改變位置囉！

第二個疑惑：
為什麼是用.intro這個<div>標籤當作基準呢？
這時我們要到網頁的F12開發人員工具來看看他們的階層關係：

從網頁F12開發人員工具我們可以發現，你剛剛用CSS創造的偽元素::before就在<div>標籤的下一層！
也就是說，::before這個元素你可以想成是一個標籤區塊，套用position相對位置設定後，偽元素設定position:absolute;屬性後的父元素就是<div>標籤區塊了。

因此，我們將<div>標籤區塊設定一個position:relative;屬性，來作為偽元素的基準位置。

這樣你就可以透過top和left等位置屬性，任意調整你創建的偽元素區塊位置了！

::before和::after實務上要小心的地方

使用時務必務必要小心的就是：
::before和::after一定要加入content屬性才會有作用！！！
這點一定要星號再星號⭐⭐⭐⭐⭐

就算沒有要加入文字，也一定要有content屬性，內容留空即可，像這樣：

/* CSS */

.intro::before{
  content: ""; /*雙引號中留空，但必須存在*/
  /*其他屬性設定*/

}

否則若沒有content屬性，你怎麼設定都是無效的呦！！！

就連我之前寫的時候偶爾也會忘記，然後再那邊debug老半天甚至還重複清掉cookie，懊惱為何沒有效果，最後才發現content屬性沒加到偽元素的設定中所以無效，真的是費心又耗時啊！

總結

以上就是最基礎、最基礎的偽元素::before和::after介紹，希望經過這些最基本的說明與範例實作，讓大家不用像我一樣花大把時間還一直搞不懂這在幹嘛！

而偽元素的應用超級廣泛，還能包刮用偽元素創建一個大於符號的箭頭，只要::before和::after分別產出一個長方形並傾斜，就能產出一個純程式碼的箭頭囉！

所以一旦你學會偽元素::before和::after的應用，它的優點就是自由度極高！！
還有只要你有一個HTML標籤作為基底，每一個標籤你都可以建立::before和::after兩個新的區塊出來，讓你不用修改HTML就能完成一堆實用的效果囉！

• Font Awesome教學-Icon圖示取代文字的按鈕
• CSS position 屬性教學：relative和absolute實作
• 純CSS製作HTML頁籤切換的效果與實例
• RWD教學-只要兩行就能輕鬆見效的實作經驗
• Radio button和Checkbox放大並自訂樣式