iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
2

W3C 寫道:content 屬性與 ::before 和 ::after 一起使用在文檔中生成內容。

因此,使用 ::before 和 ::after 一定要有 content 否則不會發生作用。

值 與 使用方式

content 的值有:

  • normal | none normal為預設,使用這兩個值不會有任何效果出現。

  • <string> 值為字串,會在之前或之後加入該字串。因為放的是文字,所以可以針對文字作顏色、字體、大小的變換

p:after {
    content: "我會在文字後";
    font-size: 2em;
    color: purple;
}
  • <url> 可以在之前或之後加入圖片、聲音或影像等
p:before {
    content: url(w3css.gif);
}
  • <counter> 可以自動計數連續固定標籤
如:可以在數個連續的 p 之前自動計算其順序數值,也可以運用在 ul li 之前
p{
  counter-increment: num
}
p::before{
    content: counter(num) 
}
  • attr(<identifier>) 可以在所選元素之前或之後插入指定屬性的值。注意這時候 content 不需要 ''符號
.menu li::before{
    content: attr(href)
}
  • open-quote | close-quote 給予開始、結束的引號 ",大家應該有看過網頁上有很大的引號,用來做裝飾的,就可以用這兩個值來完成唷~
p:before {
    content: open-quote;
}

p:after {
    content: close-quote;
}
p:before,p:after{
    font-size: 3em;
    color: #ccc;
}
  • no-open-quote | no-close-quote 在有引號的區段內的指定元素,取消其引號
<p>My name is Iris 這一段會有引號</p>
<p class="hometown">這一段不要引號</p>
<p>這一段會有引號</p>
p:before {
    content: open-quote;
}

p:after {
    content: close-quote;
}

p.hometown:before {
    content: no-open-quote;
}

p.hometown:after {
    content: no-close-quote;
}

  • inherit 會繼承前一個的屬性

還可以這樣使用

  • 想要在文字前加上獨立區塊的小圓,讓 content 的值為空,再用寬高做出需要的小圓
.menu li::before{
    content: '';
    width: 10px;
    height: 10px;
    display: block;//因為 ::before 是 inline 元素,所以需要將它變成 block
    background: #f00;
    border-radius: 5px;
}

更複雜的用法,可以替主元素加上相對定位,而 ::before 或 ::after 加上絕對定位,就可以做出各種想要的效果出來了。

試玩範例

以上是 偽元素 與 content Property 的使用方式。各位看倌明天見囉~

參考資料:
[1] https://www.w3.org/wiki/CSS/Properties/content
[2] https://www.w3schools.com/cssref/pr_gen_content.asp


上一篇
Day24:小事之 CSS 偽類 與 偽元素
下一篇
Day26:小事之 多重背景與漸層背景 CSS3 Gradients
系列文
前端路上那些重要與不重要的小事30

2 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2018-01-13 23:05:40

/images/emoticon/emoticon31.gif

試玩範例補上了XDDD

/images/emoticon/emoticon07.gif
/images/emoticon/emoticon12.gif

0
ayugioh2003
iT邦新手 5 級 ‧ 2018-05-23 18:12:00

抓漏

<uri> 可以在之前或之後加入圖片、聲音或影像等

應該是 url ~

哈~謝謝你喲~

我要留言

立即登入留言