CSS 馬克筆效果可以幫助我們?cè)诰W(wǎng)頁上實(shí)現(xiàn)像手寫的效果，讓網(wǎng)頁看起來更加生動(dòng)有趣。以下是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)方法：

.mark {
position: relative;
display: inline-block;
padding: 20px;
font-size: 24px;
line-height: 1.2;
}
.mark:before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background-color: rgba(0, 0, 0, 0.2);
transition: width 0.3s ease;
}
.mark:hover:before {
width: 100%;
}

上述代碼中，我們首先定義了一個(gè)名為 .mark 的 class，作用于需要實(shí)現(xiàn)馬克筆效果的元素上。在 .mark 的樣式中，我們?cè)O(shè)置了元素的一些基本樣式，比如 padding、font-size 等等。

接著，在 .mark:before 的樣式中，我們?cè)O(shè)置了一個(gè)偽元素，即在 .mark 元素之前插入一個(gè)元素來實(shí)現(xiàn)下劃線效果。在這個(gè)偽元素中，我們?cè)O(shè)置了高度為 100%（即撐滿整個(gè)元素），寬度為 0 的黑色半透明背景。退到了:hover 時(shí)，我們讓寬度變?yōu)?100%，實(shí)現(xiàn)下劃線展開的效果。

最后，我們只需要在 HTML 文檔中設(shè)置 .mark 的 class 即可實(shí)現(xiàn)效果，如下所示：

<p class="mark">這是需要添加馬克筆效果的文本。</p>

以上就是一個(gè)簡(jiǎn)單的 CSS 馬克筆效果實(shí)現(xiàn)方法，希望對(duì)您的網(wǎng)頁設(shè)計(jì)有幫助！