[分享]css两行不同颜色不同

今天我向大家介绍一种很方便的CSS技巧——使用两行不同颜色不同的文字。在文本中使用这种效果可以方便地突出重点或者归纳总结。/设置p标签的样式/ p { fontsize: 16px; lineheig...

今天我向大家介绍一种很方便的CSS技巧——使用两行不同颜色不同的文字。在文本中使用这种效果可以方便地突出重点或者归纳总结。

/*设置p标签的样式*/
p {
  font-size: 16px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

/*使用:before伪类，设置第一行的样式*/
p:before {
  content: "";
  width: 100%;
  height: 5px;
  display: block;
  background-color: #f00;
  margin-bottom: 10px;
}

/*使用:after伪类，设置第二行的样式*/
p:after {
  content: "";
  width: 100%;
  height: 5px;
  display: block;
  background-color: #0f0;
  margin-top: 10px;
} 

在上面的代码中，我们首先设置了p标签的基本样式。然后利用:before和:after伪类，分别设置了第一行和第二行的背景色和间距。注意，为了让伪类的内容能够正确地显示，我们还需要将它们的display设置为block。

使用这种技巧可以让我们在文本中快速突出需要强调的内容，同时也可以让文章看起来更有层次感。希望大家能够在实践中灵活应用这种CSS效果。