您可以使用CSS中的伪元素来为数字和标题应用不同的样式。下面是一个示例代码：

HTML代码：

1
2
3
4
5

Title 1
Title 2
Title 3
Title 4
Title 5

CSS代码：

.numbered-button {
  width: 50px;
  height: 50px;
  font-size: 24px;
  background-color: #f2f2f2;
  border: none;
  border-radius: 50%;
  margin-right: 10px;
}

.numbered-title::before {
  content: attr(data-number) ". ";
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.numbered-title {
  font-size: 24px;
  margin-bottom: 10px;
}

在上述代码中，我们为数字按钮和标题分别添加了不同的类名（.numbered-button和.numbered-title）。首先，我们通过CSS为数字按钮设置了样式，包括背景颜色、边框等。然后，我们使用伪元素::before为标题添加了带有编号的内容。在伪元素中，我们使用attr(data-number)获取data-number属性的值，并与冒号和空格连接起来，然后设置样式，例如字体大小、字体粗细和颜色。最后，我们为标题设置了单独的样式，例如字体大小和底部边距。

希望这个示例能帮助到您！