結論から言うとほぼ

<span>★</span>

が挿入されているのと同等でなんでもできる。

サンプルのHTML

<h1 id="hogehogehoge">This is a pen</h1>

まず単純に文字を挿入する。そうすると、普通に「This is a pen」の前に「★」が挿入される。

#hogehogehoge::before{
    content: "★";
}

色をつけてみる。普通に色がついた。

#hogehogehoge::before{
    content: "★";
    color: yellow;
}

では背景を設定してみる。普通に色がついた。ベトナムである。

#hogehogehoge::before{
    content: "★";
    color: yellow;
    background-color: red;
}

では線を引いてみる。普通についた。

#hogehogehoge::before{
    content: "★";
    color: yellow;
    background-color: red;
    border: 1px solid black;
}

フォントをでかくする。普通にでかくなった。

#hogehogehoge::before{
    content: "★";
    color: yellow;
    background-color: red;
    border: 1px solid black;
    font-size: 50px;
}

余白をつけてみる。普通にできた。

#hogehogehoge::before{
    content: "★";
    color: yellow;
    background-color: red;
    border: 1px solid black;
    font-size: 50px;
    padding: 10px;
}

文字との間隔をあけてみる

#hogehogehoge::before{
    content: "★";
    color: red;
    background-color: green;
    border: 1px solid #f00;
    font-size: 50px;
    padding: 10px;
    margin-right: 20px;
}

普通に空いた。

角丸にしてみる

#hogehogehoge::before{
    content: "★";
    color: red;
    background-color: green;
    border: 1px solid #f00;
    font-size: 50px;
    padding: 10px;
    margin-right: 20px;
    border-radius: 6px;
}

普通になった。

デカさ指定してみる

#hogehogehoge::before{
    content: "★";
    color: red;
    background-color: green;
    border: 1px solid #f00;
    font-size: 50px;
    padding: 10px;
    margin-right: 20px;
    border-radius: 6px;
    display: inline-block;
    width: 100px;
    height: 50px;    
}

普通にできた。

好きな位置においてみる

#hogehogehoge::before{
    content: "★";
    color: red;
    background-color: green;
    border: 1px solid #f00;
    font-size: 50px;
    padding: 10px;
    margin-right: 20px;
    border-radius: 6px;
    display: inline-block;
    width: 100px;
    height: 50px;
    position: absolute;
    top: 40px;
    left: 300px;   
}

普通に動いた

相対位置になる？

#hogehogehoge{
    position: relative;
}
#hogehogehoge::before{
    content: "★";
    color: red;
    background-color: green;
    border: 1px solid #f00;
    font-size: 50px;
    padding: 10px;
    margin-right: 20px;
    border-radius: 6px;
    display: inline-block;
    width: 100px;
    height: 50px;
    position: absolute;
    top: 40px;
    left: 300px;   
}

普通にh1 に対して相対位置になった。スゴイ。

相対位置で微調整できる？

#hogehogehoge::before{
    content: "★";
    color: red;
    background-color: green;
    border: 1px solid #f00;
    font-size: 50px;
    padding: 10px;
    margin-right: 20px;
    border-radius: 6px;
    display: inline-block;
    width: 100px;
    height: 50px;
    position: relative;
    top: 20px;
}

できる。スゴイ。