横棒グラフにパーセンテージをつける

html5
CSS

ちょっとHTMLを久々に書いたのでメモ投稿

<style>
.base {
    margin-top: 15px;
    width: 150px;
    height: 10px;
    background-color: #eceff1;
    position: relative;
}

.graph {
    height: 100%;
    background-color: #0091ea; z-index: 99;
}

.memory {
    position: absolute;
    color: #bdbdbd;
    font-size: 8px;
    width: 2px;
    height: 5px;
    top: -11;
}

</style>

<div class="base">
    <div class="memory" style="left: 75;">50</div>
    <div class="memory" style="left: 150;">100</div>

    <div class="graph" style="width: 30%"></div>
</div>


<div class="base">
    <div class="memory" style="left: 75;">50</div>
    <div class="memory" style="left: 150;">100</div>

    <div class="graph" style="width: 80%"></div>
</div>

<div class="base">
    <div class="memory" style="left: 75;">50</div>
    <div class="memory" style="left: 150;">100</div>

    <div class="graph" style="width: 10%"></div>
</div>


<div class="base">
    <div class="memory" style="left: 75;">50</div>
    <div class="memory" style="left: 150;">100</div>

    <div class="graph" style="width: 100%"></div>
</div>

Nな人
とあるWebアプリケーション開発企業で働くしがないエンジニア見習い。
好き嫌いは激しいが、いろんなことが知りたい。
最近はPHPをメインに書いているが、初めて触った言語はActiveBasicで動くN88BASICという、超古典的言語。
BASICとperlをこよなく愛するP言語エンジニア。
よしなにお願いいたします。