CSS 馬克筆效果可以幫助我們在網頁上實現像手寫的效果，讓網頁看起來更加生動有趣。以下是一個簡單的實現方法：

.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%;
}

上述代碼中，我們首先定義了一個名為 .mark 的 class，作用于需要實現馬克筆效果的元素上。在 .mark 的樣式中，我們設置了元素的一些基本樣式，比如 padding、font-size 等等。

接著，在 .mark:before 的樣式中，我們設置了一個偽元素，即在 .mark 元素之前插入一個元素來實現下劃線效果。在這個偽元素中，我們設置了高度為 100%（即撐滿整個元素），寬度為 0 的黑色半透明背景。退到了:hover 時，我們讓寬度變為 100%，實現下劃線展開的效果。

最后，我們只需要在 HTML 文檔中設置 .mark 的 class 即可實現效果，如下所示：

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

以上就是一個簡單的 CSS 馬克筆效果實現方法，希望對您的網頁設計有幫助！