css肩头上加数字

CSS中，需要在页面中展示数字的时候，可以使用一种特殊的格式来实现。这种格式就是在元素的肩头上展示数字，通常用于显示数量或计数。以下是CSS中实现肩头上加数字的方法：

/* 一般样式 */
.num {
  position: relative;
}
/* 数字样式 */
.num:before {
  content: "1";
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
 

上面的代码中，首先给元素设置了一个相对定位的样式，然后通过:before伪元素来实现在元素肩头上展示数字。在:before中，设置了数字的内容、位置、样式等属性，其中：top: -10px和right: -10px表示数字距离元素的上部和右部的距离，width: 20px和height: 20px表示数字展示的宽度和高度。

除了上面的样式之外，还可以根据实际需求进行更改。例如，如果数字较大，可以适当增大展示的宽度和高度。

在使用CSS实现肩头上加数字的时候，需要注意一些细节问题，比如在不同浏览器和设备中的兼容性、数字位置的合理调整等等。通过合理使用样式和不断尝试，可以实现各种不同形式的数字展示，提高页面的用户体验。