html - CSS:内联段落清除/底边空白

后续HTML由CMS呈现（我无法修改HTML，但可以更改CSS）。

.teaser p {
  display: inline;
  clear: both;
  background-color: red;
  margin-bottom: 20px;
}

<div class="teaser">
<p>This is paragraph one</p>
<p>This is paragraph two...</p>
</div>

我想实现该段落的每一行都有背景色-而不是整个段落都为方框。像这样：



上面的图片用于以下帖子中-他们在P标签中添加了SPAN，但我做不到：
CSS : Background-color on multi-line text?

是否有可能在每个段落之后添加一个分隔符并使用纯CSS在底部添加空白？

最佳答案

使用换行符作为：after的内容？

.teaser {
  display: block;
  width: 4em;
}
.teaser p {
  display: inline;
  background-color: red;
  margin-bottom: 20px;
}
.teaser p:after {
  content: "\A\A";
  white-space:pre;
}

<div class="teaser">
  <p>This is paragraph one</p>
  <p>This is paragraph two...</p>
</div>

关于html - CSS:内联段落清除/底边空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28499677/