iT邦幫忙

0

在H2標題前插入1、2、3...的數字

以下的程式碼還需如何修改,才能讓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;
}

https://ithelp.ithome.com.tw/upload/images/20210114/20134346ztxm1gpZlT.png

froce iT邦大師 1 級 ‧ 2021-01-14 09:04:31 檢舉
https://www.oxxostudio.tw/articles/201706/pseudo-element-2.html

沒完整的html結構沒辦法幫你寫code,麻煩自己照著教學去改。
1
ccutmis
iT邦高手 6 級 ‧ 2021-01-14 09:36:15

參考網址:
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>
0
浩瀚星空
iT邦超人 1 級 ‧ 2021-01-14 09:37:44

只能從你的html頁下手處理。
找找你0的來源在哪。

css並不會幫你幹這件事。
而且,這看起來是加元件的。怎麼會每個都需要對應css??
開發上有很大的問題了。

看更多先前的回應...收起先前的回應...
ccutmis iT邦高手 6 級 ‧ 2021-01-14 09:42:18 檢舉

報告長官 css3加了很多奇怪的方法 已經不是以前那個單純可愛的css了...

單純css我知道還是可以做到編號。
但他的方式是單一元件的應用。
這一定辦不到的。
沒宣告好一個1對多的情況。要怎麼去處理編號?

ccutmis iT邦高手 6 級 ‧ 2021-01-14 09:50:38 檢舉

星空大可以參考一下這裡
https://www.w3schools.com/css/css_counters.asp
其實我也是google搜的 好久沒有研究css了XD

這個我知道啦。
我是指他的做法是辦不到的。
因為他的做法是直接對元件加style(我猜)
這樣只會對樣式有作用。drvice的部份不會有作用。

啊~~~我錯了。他是加css到head。
好吧。我說錯了。

ccutmis iT邦高手 6 級 ‧ 2021-01-14 09:55:48 檢舉

這個我就不知道了 沒用過 wordpress XD

2
japhenchen
iT邦大師 1 級 ‧ 2021-01-14 09:45:37

純綷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;
}

輸出
https://ithelp.ithome.com.tw/upload/images/20210114/20117954dzjRrGJfy9.jpg
https://jsfiddle.net/9bg62rse/1/

看更多先前的回應...收起先前的回應...

重點是那個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%);
}

https://jsfiddle.net/vuzsxwtd/1/
https://ithelp.ithome.com.tw/upload/images/20210114/20117954YZMvhheWYG.jpg

kyriehong iT邦新手 5 級 ‧ 2021-01-15 09:55:30 檢舉

推一個!

推一個,經驗值UP!

zzxcv741 iT邦新手 5 級 ‧ 2021-01-18 18:34:33 檢舉

真的學到..css還可以這樣用

我要發表回答

立即登入回答