css一行显示不同位置的文字

在 Web 开发中，CSS 样式表是让网页变得美观且易于阅读的重要因素之一。在 CSS 中，我们可以使用一些技巧让同一行显示不同位置的文字效果，下面我们来看看如何实现。

p {
    display: inline-block;
    position: relative;
}
 
p:before {
  content: "";
  position: absolute;
  bottom: 0;
  border-bottom: 2px solid black; 
  width: 50%;
}
 
p:after {
  content: "";
  position: absolute;
  top: 0;
  border-top: 2px solid black; 
  width: 50%;
} 

以上代码中，我们首先将 p 标签的 display 属性设为 inline-block，以便一行内可显示多个 p 标签。接下来的代码均使用 :before 和 :after 伪元素来实现文字效果。

第一个 :before 伪元素将边框定位在底部，并将宽度设为 50%。第二个 :after 伪元素将边框定位在顶部，并将宽度设为 50%。由此，我们便实现了一行内不同位置的边框显示。

你可以改变 border 值来适应你的设计风格。同时，你还可以使用其他属性，如 background-color、color、font-size 等，来实现更多文字效果。