◆ よく見かける背景にグラデーションとは違う方法
◆ inline-block とか position で :before をマーカーとして使います
◆ ちょっと複雑ですが 細かいカスタマイズがききます 
css でマーカーを塗ったデザインを作ってみます

CSS
span.sample{
display: inline-block;
position: relative;
z-index: 0;
/* ここから下はお好みで */
text-shadow: 0px 0px 1px rgba(255,255,255,0.7);
}
span.sample:before{
content: '';
position: absolute;
z-index: -1;
/* ここから下はお好みで */
box-shadow: 0 0 3px 0 white inset;
left: -2px;
right: -2px;
top: 45%;
bottom: 5%;
border-radius:10px;
background-color:#fd3;
}
HTML
<span class="sample">マーカーつける</span>
マーカー付ける


擬似要素 before でマーカーを作ります
位置を調整するために span を relative で before を absolute にします
マーカーが後ろに来ないといけないので z-index で裏側にします
それと 幅を計算させるために span は inline-block にします

あとは適当にデザインをつけていきます


まずは実際のマーカー部分（:before）のところからみていきます

top と bottom を使って マーカーをどのあたりにつけるかを決めます
全体なら両方 0 ですし 下半分なら top を 50% で bottom を 0 になります

left right で左右の位置を調整します
-2px だと ちょっと左右に飛び抜けてます

border-radius で縁を丸めたり box-shadow で縁をぼかしたりしてます
必要に応じて変えたり消したりしてください

background-color は重要なマーカーの色です

次に 文字部分ですが ここは特に毎回いじるようなものはないです
text-shadow をつけて薄く縁取っておけば マーカーが濃い色で自然で読みやすくなるので背景に合わせて変えるのもありです



こんな複雑なことしないでも シンプルに背景色にグラデーションを使って
<span style="background:linear-gradient(transparent 50%, #fcd 50%)">マーカーつける</span>
マーカー付ける

と これだけでもマーカーになります
ただ 上の方法のほうがこれよりもっと細かくデザインつけることができます