次の例に純粋な CSS 通知バブルを追加する方法
コードCSS
<style>
.outer{
width:103px;
height:113px;
display:inline-block;
padding:5px;
margin:25px 14px 15px 14px;
font-size: 14px;
font-weight:bold;
color:#8E9FA9;
text-transform: uppercase;
border:1px solid #cccece;
text-align:center;
background-color:#f8f8f8;
letter-spacing: -0.06em;
-webkit-text-shadow: #ffffff 1px 1px;
moz-text-shadow: #ffffff 1px 1px;
text-shadow: #ffffff 1px 1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
box-shadow: 0 3px 2px 1px rgba(0, 0, 0, 0.03);
}
.outer:hover {
color:#7D878E !important;
-webkit-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.05);
}
a.outer span {
font-size: 14px;
display:block;
padding:86px 0 6px 0;
background-repeat:no-repeat;
background-color:#f1f2f3;
background-position:50% 18px;
}
a.outer span:hover {background-position:50% -98px;}
a.outer.add_user span {background-image:url(icon_big_user_add.png);}
</style>
コード HTML
<a href="#" class="outer add_user">
<span>Test</span>
</a>
結果
質問
この例のように、ボックスの上部に純粋な CSS 通知バブルを追加する方法。
ご覧のとおり、数字を示す青いボールがあります。上記の例に基づいて、そのような通知ボールを適用する方法. 〜ありがとう