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 马克笔效果实现方法，希望对您的网页设计有帮助！