CSS: inline paragraph clear/margin-bottom

Question

Следующий 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-тег, который я не могу сделать: CSS : Background-color on multi-line text?

Есть ли вешать добавить перерыв после каждого абзаца и добавление нижней границы с помощью чистого CSS?

Answer 1

Используйте символы новой строки как содержимое: после?

.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>

Answer 2

Вы должны быть в состоянии достичь, установив display свойство table значение:

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

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

Answer 3

Не уверен, что если я полностью понимаю ваш вопрос, но это должно сделать трюк:

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

Конечно, если вы хотите удалить поля, просто добавьте поле:

Answer 4

Отказ от ответственности: Это модифицированная версия кода, используемого на www.webdesignerdepot.com/ (парить в блоге название)

Вы можете достичь что-то подобное с фоном градиент, но настройка line-height приведет к разрыву между рядами. Он также полагается на элемент inline, что означает, что вертикальные поля не будут работать. Поэтому <br> 's, чтобы отделить p' S:

Edit: вы можете получить вокруг вопроса высоты линии, добавляя некоторое дополнение к

.teaser { 
 
    width: 60%; 
 
} 
 

 
.teaser p { 
 
    display: inline; 
 
    color: #FFF; 
 
    margin-bottom: 20px; 
 
    line-height: 130%; 
 
    padding: 3px; 
 

 
    background-size: 202.22% auto; 
 
    -webkit-background-size: 202.22% auto; 
 
    -moz-background-size: 202.22% auto; 
 
    background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #000 50%); 
 
    transition: background-position 0.5s ease-out; 
 
    -webkit-transition: background-position 0.5s ease-out; 
 
    background-position: -98.99% 0; 
 
}

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