2 mins read ‧ 2022/07/24 普

CSS 實現螢光筆效果

程式碼範例

.hight-light {
        /* 前 50% 是透明 ( transparent ) ，後 50% 才是有顏色的 */
        /* % 數比例跟色碼可以依照自己需求變更 */
        background-image: linear-gradient(transparent 50%, #55814e 50%);

        /* 下面是做一些偏移，依每人需求而定 */
        margin: 0rem 0.25rem;
        padding: 0rem 0.25rem;
}

去 Codepen 自己試試看🔗

class name 也可以依照自己需求變更，像本站的實現方式就是 <strong> 標籤內的都會上螢光筆

實際效果

LiveCanvas – 是一個創新且強大的工具，能讓你使用 “現成的” Bootstrap 5 區塊快速寫出精練的 HTML