Css 使每个跨度图元远离静止部分（一个除外）

我希望能够用更少的代码编写一个样式，在这里我可以将它应用于4个span标记。我希望每个跨度都有相同的属性，但我希望是30px；每一个之间的空间。最后，我希望第二跨与右侧的距离与其他跨不同

有没有办法做到这一点，或者您需要为span 2编写单独的样式

这是我为每个跨度设计的风格，效果很好。但必须有一个更好的方法，用更少的

.right-lines {
  z-index:100; 
  display:block; 
  position:absolute; 
  width:80px; 
  height:2px; 
  background-color:#fff; 
  right:-80px; 
  margin:40px;
  top:140px;
}

.right-lines2 {
  z-index:100; 
  display:block; 
  position:absolute; 
  width:80px; 
  height:2px; 
  background-color:#fff; 
  right:-50px; 
  margin:40px;
  top:180px;
}

.right-lines3 {
  z-index:100; 
  display:block; 
  position:absolute; 
  width:80px; 
  height:2px; 
  background-color:#fff; 
  right:-80px; 
  margin:40px;
  top:220px;
}

.right-lines4 {
  z-index:100; 
  display:block; 
  position:absolute; 
  width:80px; 
  height:2px; 
  background-color:#fff; 
  right:-80px; 
  margin:40px;
  top:260px;
}

---

尝试创建一个公共类或使用span标记本身来设置公共特征的样式。当然，您可以使用其他类样式获得更高的效率。样本span标记可能看起来像

…

---

尝试创建一个公共类或使用span标记本身来设置公共特征的样式。当然，您可以使用其他类样式获得更高的效率。样本span标记可能看起来像

…

---

如果您希望线之间的间距为30px，请使用30px的边距。没有必要进行如此多的绝对定位。这还允许使用较少的特定样式

正文{
背景：黑色；
}
.右行{
位置：绝对位置；
顶部：140px；
右：0；
z指数：100；
字号：0；
文本对齐：右对齐；
}
.右线跨度{
显示：块；
宽度：80px；
高度：2倍；
背景色：#fff；
保证金：0 80px 30px自动；
}
.右线跨度：第n个类型（2）{
右边距：50px；
}
.右行跨度：最后一个孩子{
页边距底部：0；
}

---

如果您希望行之间的间距为30px，请使用30px的边距。没有必要进行如此多的绝对定位。这还允许使用较少的特定样式

正文{
背景：黑色；
}
.右行{
位置：绝对位置；
顶部：140px；
右：0；
z指数：100；
字号：0；
文本对齐：右对齐；
}
.右线跨度{
显示：块；
宽度：80px；
高度：2倍；
背景色：#fff；
保证金：0 80px 30px自动；
}
.右线跨度：第n个类型（2）{
右边距：50px；
}
.右行跨度：最后一个孩子{
页边距底部：0；
}

/* common styles */
.span_class {
    z-index:100; 
    display:block; 
    position:absolute; 
    width:80px; 
    height:2px; 
    background-color:#fff;
    margin:40px;
}

/* And now make the special ones */
.right-lines {
    right:-50px;
    top:180px;
}

.right-lines2 {
    right:-50px; 
    top:180px;
}

.right-lines3 {
    right:-80px; 
    top:220px;
}

.right-lines4 {
    right:-80px; 
    top:260px;
}