CSSでヘルプアイコンを作る方法【コピペでOK】

CSSで以下のような「？」マークのヘルプアイコンを作る方法です。
コピペでOKです。

ヘルプ

html

<a href="#" class="help">ヘルプ</a>

CSS

.help::before{
    content: "?";
    font-size: 85%;
    margin-right: 5px;
    display: inline-block;
    vertical-align: 2px;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5;
    border-radius: 50%;
    background: #4287f5;
    color: #FFF;
    font-weight: bold;
}

まとめ

「？」をCSSだけで作るのは難しいので普通にテキストとして「？」マークを使っています。
font-familyを変更することで「？」マークも変更できます。

応用すれば何の記号のマークでも作れそうですね。

以上、CSSでヘルプアイコンを作る方法でした。