[分享]css列表中文字上下移动

CSS是网站制作中的必备技能之一，其中的列表样式也是常用的一个样式。在列表样式中，有时需要将文字上下移动以达到美观的效果。ul li { : relative; } ul li:before { co...

CSS是网站制作中的必备技能之一，其中的列表样式也是常用的一个样式。在列表样式中，有时需要将文字上下移动以达到美观的效果。

ul li {
  position: relative;
}

ul li:before {
  content: "";
  position: absolute;
  top: -5px; /* 文字向上移动5像素 */
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
} 

上面的代码中，我们给li元素设置了相对定位，然后让其前面的伪元素（即:before）使用绝对定位。通过设置top值，我们实现了文字向上移动的效果。如果需要文字向下移动，只需将top值改为一个正数即可。

如果需要给多个列表项应用这个样式，可以使用nth-child或者nth-of-type选择器，以确保每个列表项的样式都唯一。

ul li:nth-child(odd):before {
  /* 奇数项 */
}

ul li:nth-child(even):before {
  /* 偶数项 */
} 

上面的代码中，我们使用nth-child选择器分别选择了奇数项和偶数项，然后给其:before伪元素设置不同的样式，以达到不同的视觉效果。

CSS列表样式中文字的上下移动，可以运用在很多场合中，如导航菜单、特殊列表等。我们可以通过不断地实践和尝试，来掌握这个技巧，让我们的网站变得更加美观、精致。