css3 和一种将跨度着色为圆圈的方法，另一半作为背景

Question

所以，我有一些 html 布局，我不能更改 html，只能更改 css。现在，我可以实现我想要的颜色并创建带有边框半径的圆圈(见图)。这是摩擦，每个方 block 都是一个跨度。没有内部 div/外部 div.. 只是跨度。有没有办法用 css 实现那个圆圈然后填充一半背景。

在基础层面上，代码将是:

<span class="day is-range is-selected" />22</span>
<span class="day is-range" />23</span>

基本上，当用户选择一个日期时，我将其涂成明亮的红色，将其制成圆形，将其他日期的背景设置为更波本红色的颜色......太棒了......但是带有圆形的所选日期没有'没有那个“渗入”另一个正方形的外观，其跨度的一半是彩色的。有没有一种方法可以使用 css 来实现这一点，而无需对 html 进行修改？

我只能实现以下目标:

我想要实现的目标。

这确实是我想要实现的目标。跨度变成一个圆圈，我可以做到这一点 - 但以某种方式使一半的跨度具有不同的背景颜色。

我使用的 CSS 相当简单。请注意，我必须使用 !important 来覆盖生成的内容。

  .is-selected {
    background-color: @selected-background !important;
    color: @base;
    border-radius: 20px;
  }



  .is-inRange {
    background-color: @active-background !important;
    color: @base;
  }

Answer 1

伪元素似乎是这里唯一的选择，因为 HTML 无法更改。

虽然特异性已经得到管理:

	.day {
	  float: left;
	  width: 40px;
	  height: 40px;
	  background: plum;
	  line-height: 40px;
	  text-align: center;
	  color: white;
	}
	.is-range {
	  background: plum;
	}
	.is-range.is-selected {
	  background-color: red;
	  border-radius: 50%;
	  position: relative;
	}
	.is-range.is-selected:after {
	  content: "";
	  position: absolute;
	  top: 0;
	  width: 50%;
	  height: 100%;
	  left: 50%;
	  background: plum;
	  z-index: -1;
	}
	

<div>
  <span class="day is-range is-selected">22</span>
  <span class="day is-range">23</span>
  <span class="day is-range">24</span>
  <span class="day is-range">25</span>
</div>