以下的程式碼還需如何修改，才能讓H2的標題前橘色盒子中的數字，可以依數字1、2、3...的顯示出來?
示例網站文章：https://weblai.co/css-title/
以下為程式碼:
add_action('wp_head',function(){ ?>
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
body {font-family: 'Noto Sans TC', sans-serif;}/*思源黑體*/
article .ast-post-format- .entry-content h2:before {
content: counter(chapter) "";
color: #fff;
background-image: linear-gradient(45deg, #805300 0%, #805300 1%, #F59F00 100%);
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
border-radius: 3px;
padding: 0 0.8rem;
margin: 0 0.8rem 0 0;
}
已邀請的邦友 {{ invite_list.length }}/5
參考網址:
https://www.w3schools.com/css/css_counters.asp
簡單來說就是在css裡的 body區塊加入變數初始化
counter-reset: section;
然後在要遞增的項目區塊加上
counter-increment: section;
content: counter(section) "";
底下是一個簡單的範例:
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
body {
counter-reset: section;
font-family: 'Noto Sans TC', sans-serif;
}/*思源黑體*/
article .ast-post-format- .entry-content h2:before {
counter-increment: section;
content: counter(section) "";
color: #fff;
background-image: linear-gradient(45deg, #805300 0%, #805300 1%, #F59F00 100%);
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
border-radius: 3px;
padding: 0 0.8rem;
margin: 0 0.8rem 0 0;
}
</style>
</head>
<body>
<article><div class="ast-post-format-"><div class="entry-content"><h2>測試標題1</h2></div></div></article>
<article><div class="ast-post-format-"><div class="entry-content"><h2>測試標題2</h2></div></div></article>
<article><div class="ast-post-format-"><div class="entry-content"><h2>測試標題3</h2></div></div></article>
</body>
</html>
只能從你的html頁下手處理。
找找你0的來源在哪。
css並不會幫你幹這件事。
而且，這看起來是加元件的。怎麼會每個都需要對應css??
開發上有很大的問題了。
報告長官 css3加了很多奇怪的方法 已經不是以前那個單純可愛的css了...
單純css我知道還是可以做到編號。
但他的方式是單一元件的應用。
這一定辦不到的。
沒宣告好一個1對多的情況。要怎麼去處理編號?
星空大可以參考一下這裡
https://www.w3schools.com/css/css_counters.asp
其實我也是google搜的 好久沒有研究css了XD
純綷CSS不使用任何JS框架
html
<h2 data-number="2">
步驟...
</h2>
css
h2:before {
content: attr(data-number);
display: inline-block;
/* customize below */
font-size: 1em;
margin-right: 0.6em;
width: 1.6em;
line-height: 1.6em;
text-align: center;
border-radius: 50%;
color: #FFF;
background: #F77621;
}
重點是那個data-number
改成圓角方塊很簡單，把border-radius改小一點即可，這裡加了漸層色變化(SORRY我美工被狗啃了)
h2:before {
content: attr(data-number);
display: inline-block;
/* customize below */
font-size: 1em;
margin-right: 0.6em;
width: 1.6em;
line-height: 1.6em;
text-align: center;
border-radius: 10%;
color: #FFF;
background: linear-gradient(90deg, rgba(153,152,75,1) 0%, rgba(227,160,116,1) 100%);
}
iThome鐵人賽
看影片追技術