CSS li.before 彩色框内的圆圈就像 li 文本

Question

我可能会以错误的方式解决这个问题，但我想要实现的是一种水平列表样式，它与一些 js 链接，将导航从一个选项卡更改为另一个选项卡。选项卡标题应该在使用半径的 css 圆内的文本之前有一个计数器，我已经做到了这一点。

我似乎无法解决的是如何将这个圆圈放在一个与 li 文本背景颜色相同的框中，并确保它在悬停/选择时改变颜色。

到目前为止，这是我的代码:

    OL.evotab {
        counter-reset:li;
        list-style: none;
        float:left;
        width:100%;
        padding:0px;
    }

    OL.evotab LI {
        list-style:none;
        position:relative;
        display: inline;
        float:left;
        margin:0 0 6px 2em;
        padding:4px 8px;
    }
    ol.evotab > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
   generated content but not positioning it (Camino 2 is one example) */
margin-right:8px;
padding:4px;
border-radius:50%;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
OL.evotab LI A {
background-color: #f8f8f8;
color: #28343d;
    text-decoration: none;
padding-top: 30px;
padding-left:20px;
padding-right:20px;
padding-bottom:30px;
border-bottom:5px solid #dfdfdf;
    }
    OL.evotab LI A.selected,
OL.evotab LI A:hover {
background-color: #f8f8f8;
color: #e51f38;
padding-top: 30px;
padding-bottom:30px;
border-bottom: 5px solid #e51f38;
    }

    OL.evotab LI A:focus {
        outline: 0;
    }

Answer 1

FIDDLE

在没有任何 HTML 的情况下，有点难以理解您的意思....但请查看链接的 fiddle 以获得一个想法。

HTML

<a href='#'>This is an Item</a>

CSS:

a {
    background:grey;
    border:1px solid black;
    display:inline-block;
    padding:20px;
    color:white;
    text-decoration:none;
    position:relative;
}
a:before {
    content:'7';
    color:black;
    position:absolute;
    display:inline-block;
    background:yellow;
    border:1px solid black;
    border-radius: 999px;
    left:-5px;
    width:20px;
    text-align:center;
    line-height:20px;
    height:20px;
}
a:hover, a:hover:before {
    color:red;
}