標題：修改本網站上PC版面中的CSS
出處：A.PAO designSTUDIO BLOG
時間：Mon, 05 Dec 2022 08:20:01 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/1425/

內容：
因為重新安裝系統，最近常常增加自己的部落格內容，以防自己忘了許多小細節。也包括了自己工作室的部落格記載著許多年下來的內容也十分多，需要做些CSS視覺修改，好分辨在眾多的標題與文章間的視覺修正，好讓閱讀者有較好的視覺引導

▼發現電腦版需要點修正（修改前，青色箭頭部分無 ▶）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4383


▼手機版還算清楚，所以沒有動到手機版的視覺修正

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4384


▼使用chrome檢視這行程式碼

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4387


▼按F12後，找到這段程式碼，應該是之下的 h4

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4388


▼開啟 CSS 並找到這段程式碼

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4389


▼找到 h4 在網頁中的位置，並 Chrome 中確認無誤後，就可以在 h4 下方增加一段程式碼

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4390


▼於 CSS 中增加並修改的程式碼
.textbox-title h4::before{
  z-index: 99999;  /*提升Layer層，不受到其他設定遮蔽*/
  position: relative; /*將content內的符號做相對位置移動*/
  margin: 0 0 0 -20px; /*向左移動20px*/
  content: "▶";  /*文字符號為 ▶*/
  color: rgba(102,102,102,0.80);  /*指定文字顏色*/
}


▼當程式碼更新後（修改後，青色箭頭部分出現了 ▶）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4392



Generated by Bo-blog 2.1.1 Release