Css 编号按钮-具有不同样式的编号和标题

我试着做一个这样的按钮：

一个被“划分”为两部分的单个按钮—数字和标题

这两部分都有不同的背景色、字体颜色，文本在相应的背景中居中。悬停时，它的大小会增加

这张图片是下面代码的真实结果。然而，有一些问题我似乎无法解决

1） 我想让它像单个元素一样工作，但到目前为止，我只能通过为按钮的每个部分创建两个不同的div来实现这一点。有没有更优雅的方法来达到同样的效果

2） 当我缩小浏览器窗口时，会得到如下结果：

我不希望它像那样分裂。而且，我似乎无法使它在页面中居中。如果你注意到，它有点偏右

我怎样才能解决这些问题

代码如下：

正文{
背景色：#0091c0；
字体系列：Arial、Helvetica、无衬线字体；
}
.btn{
浮动：左；
高度：40px；
线高：40px；
字体大小：20px；
光标：指针；
盒影：3p3pRGBA（0,0,0,0.3）；
}
#btn42{
宽度：50%；
保证金：自动；
}
#btn42：悬停{
转换：标度（1.05）；
}
#BTN编号{
文本对齐：居中；
宽度：40px；
背景：#e2e1e1；
颜色：#6969；
}
#B点{
宽度：300px；
文本对齐：居中；
背景：白色；
颜色：#085388；
}

42
一些随机标题

使用一个元素并依赖伪元素作为数字：

正文{
背景色：#0091c0；
字体系列：Arial、Helvetica、无衬线字体；
}
.btn:悬停{
转换：比例（1.05）translateX（20px）；
}
.btn{
宽度：300px；
保证金：自动；
变换：translateX（20px）；/*由于伪元素而固定中心*/
文本对齐：居中；
背景：白色；
颜色：#085388；
高度：40px；
线高：40px；
字体大小：20px；
光标：指针；
盒影：3p3pRGBA（0,0,0,0.3）；
位置：相对位置；
}
.btn：：之前{
内容：attr（数据编号）；
位置：绝对位置；
排名：0；
右：100%；
宽度：40px；
背景：#e2e1e1；
颜色：#6969；
框阴影：
3px 0#fff，/*固定阴影重叠*/
3p3pRGBA（0,0,0,0.3）；
}

---

一些随机标题使用一个元素并依赖伪元素作为数字：


正文{
背景色：#0091c0；
字体系列：Arial、Helvetica、无衬线字体；
}
.btn:悬停{
转换：比例（1.05）translateX（20px）；
}
.btn{
宽度：300px；
保证金：自动；
变换：translateX（20px）；/*由于伪元素而固定中心*/
文本对齐：居中；
背景：白色；
颜色：#085388；
高度：40px；
线高：40px；
字体大小：20px；
光标：指针；
盒影：3p3pRGBA（0,0,0,0.3）；
位置：相对位置；
}
.btn：：之前{
内容：attr（数据编号）；
位置：绝对位置；
排名：0；
右：100%；
宽度：40px；
背景：#e2e1e1；
颜色：#6969；
框阴影：
3px 0#fff，/*固定阴影重叠*/
3p3pRGBA（0,0,0,0.3）；
}
一些随机标题
我认为使用一个带有两个
-标记的
-标记会更合适。要避免按钮换行，请使用
空白：nowrap。要使其在页面上居中，只需使用文本对齐，如我的示例中所示，或。取决于父元素的上下文。如果它在页面上水平和垂直居中，我宁愿使用


正文{
背景色：#0091c0；
字体系列：Arial、Helvetica、无衬线字体；
}
主要{
文本对齐：居中；
}
.btn{
边界：无；
背景：#fff；
线高：24px；
保证金：0；
填充：0；
空白：nowrap；
字体大小：20px；
光标：指针；
盒影：3p3pRGBA（0,0,0,0.3）；
过渡：转换200ms缓进缓出；
}
.btn跨度{
背景：#fff；
显示：内联块；
保证金：0；
填充物：0.2em 0.5em 0.2em；
}
.btn跨度：类型的第一个{
背景色：#ccc；
颜色：#6969；
}
.btn:悬停{
转换：比例（1.03）；
}

42一些随机标题
我认为使用带有两个
-标签的
-标签更合适。要避免按钮换行，请使用
空白：nowrap。要使其在页面上居中，只需使用文本对齐，如我的示例中所示，或。取决于父元素的上下文。如果它在页面上水平和垂直居中，我宁愿使用


正文{
背景色：#0091c0；
字体系列：Arial、Helvetica、无衬线字体；
}
主要{
文本对齐：居中；
}
.btn{
边界：无；
背景：#fff；
线高：24px；
保证金：0；
填充：0；
空白：nowrap；
字体大小：20px；
光标：指针；
盒影：3p3pRGBA（0,0,0,0.3）；
过渡：转换200ms缓进缓出；
}
.btn跨度{
背景：#fff；
显示：内联块；
保证金：0；
填充物：0.2em 0.5em 0.2em；
}
.btn跨度：类型的第一个{
背景色：#ccc；
颜色：#6969；
}
.btn:悬停{
转换：比例（1.03）；
}

42一些随机标题
谢谢您的帮助！这正是我想要的结果。我只需在数字框的阴影中再添加一个像素，因为我发现它在悬停时仍然略微可见。我对伪元素一无所知。。。我还有很多东西要学。谢谢谢谢你的帮助！这正是我想要的结果。我只需在数字框的阴影中再添加一个像素，因为我发现它在悬停时仍然略微可见。我没有