ミギムキ

[CSS] 文字に蛍光ペンで線を引いたような装飾をしたい

公開日:2018/10/29

やりたいこと

大事なところに線を引く蛍光ペン。マーカーで線を引いたような装飾で文字を強調しているサイトがあります
ポイントとなるところ、読んで欲しいところに装飾することで、ユーザーの目を引く効果が期待できます
そんな文字装飾のやり方をご紹介します

サンプルコード

.high_light {
    display: inline-block;
    position: relative;
}
.high_light::before {
    position: absolute;
    bottom: 0.25em;
    left: 0px;
    right: 0px;
    z-index: -1;
    width: 100%;
    height: 0.5em;
    background-color: rgba(255, 255, 0, 0.5);
    content: "";
}

仕組み、解説、補足など

before擬似要素で枠を用意して、枠の背景に透過色を指定します。これで蛍光ペンで引いたような感じが出ます
開始位置をちょっとずらしたりすると、アナログ感が出ていいですね

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。