css - How to reduce minimum top-padding? -


i'm trying copy facebook's notification's blobs using css3 ::before pseudo-element. added maximum height value , tried isn't enough reduce space between number , beginning of box. ideas on how reduce/eliminate it?

enter image description here

code:

html: <li notificaciones="3">[...] scss: *[notificaciones]:not([notificaciones="0"]){ &::before{     content: attr(notificaciones);     position: absolute;     color: $color-cajas-notificaciones-texto;     background-color: $color-cajas-notificaciones-fondo;     max-width: 25px;     font-size: 16px;     font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;     font-weight: 800;     height: 20px;     float: left;     z-index: 999;     width: 20px;     text-align: center;     vertical-align: top;     top: 0px;     padding: 0 1px;     color: white;     text-shadow: 0px 0px 1px;     background-color: #f03d25;     border: 1px solid #d83722;     border-bottom: 1px solid #c0311e;     border-top: 1px solid #e23923;     border-radius: 2px;     box-shadow: 0 1px 0 rgba(0, 39, 121, 0.77);     display: block;  } 

i didn't understand question well, maybe want

http://jsfiddle.net/zxshz/36/

<ul>     <li data="3"></li>     <li data="7"></li>     <li data="15"></li> </ul> 

/* css */

ul{     width: 250px; }  li{     list-style: none;     float: left;     margin-right: 8px;     width: 18px;     height: 18px;     background: #9c0;     position: relative; }  li:after{     content:attr(data);     padding: 1px 2px 2px 3px;     position: absolute;     background: red;     right: -3px;     top: -5px;     font-weight: bold;     text-align: center;     font-size: 9px;     border-radius:2px ;     color: #fff; }  li:nth-child(1){     background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 0 no-repeat; }   li:nth-child(2){     background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -58px no-repeat; }  li:nth-child(3){     background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -29px no-repeat; } 

i can't understand problem, put code please


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -