2019年8月18日 星期日

CSS 的 content 與應用

content 是一個可以用來無中生有的 CSS 屬性,這邊先來看一個簡單的例子:

,我是

本來我們只有一個這樣的內容,那如果我們要在前後都無中生有加上東西,就可以像這樣用 css:
.content::before{
  content: "大家好";
}
.content::after{
  content: "紅色死神";
}

這邊我們使用 ::before 跟 ::after,照字面看大概可以知道我們就是在選擇器的前後加上東西,而加上的就是我們自訂的文字內容,結果如下:

See the Pen
css: content
by deathhell (@deathhell)
on CodePen.



content 可以使用的值有以下幾種:
1. 文字
2. unicode
3. attr
4. url
5. counter 函數
6. css變數

2. unicode
剛才我們看過純文字了,接下來看 unicode,unicode 是瀏覽器內建的特殊符號,比如說這邊我們就用 \2103 來自動產生攝氏溫度的單位:

See the Pen
css: content unicode
by deathhell (@deathhell)
on CodePen.



3. attr
attr 指的是 html 的屬性,這邊我們示範利用自訂屬性把值給帶到 content 裡
現在天氣:

再利用 css 去拿 data 裡的值
.content::after{
  content: attr(data-weather);
}

結果如下:

See the Pen
css: content attr
by deathhell (@deathhell)
on CodePen.



4. url
url 可以直接去拿一個線上的內容,比如說圖片的網址

See the Pen
css: content url
by deathhell (@deathhell)
on CodePen.



5. counter 函數
counter 是一個有趣的東西,我們必須先認識這些跟 counter 有關的屬性,也就是 counter-reset 跟 counter-increment
counter-reset: 自訂一個要當 counter 的變數,後面可以帶預設的值
counter-increment: 要如何累進,可填正數或負數

利用這個我們來把列表前面加上數字:
蘋果
香蕉
柳丁

.wrap{
  counter-reset: count;
}
.wrap div::before{
  counter-increment:count; 
  content:counter(count) '. ';
}

See the Pen
css: content counter
by deathhell (@deathhell)
on CodePen.



6. CSS 變數
這裡我們把第一個範例的名字變成 css 的變數,用法如下:

See the Pen
css: content
by deathhell (@deathhell)
on CodePen.


用 css 的 content 大多會搭配偽元素,用得好的話是可以讓你的 css 變得更有彈性,有興趣的朋友可以玩玩看。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...