CSS: inline paragraph clear / margin-bottom

Question

Following HTML is rendered by the CMS (I can't modify the HTML, but I can change the 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> 

I want to achieve that every line of the paragraph has the background color - not the whole paragraph as a box. Something like this:

The image above was used in the following post - they added SPANs in the P-tag which I can't do: CSS : Background-color on multi-line text?

Is there any posibility to add a break after each paragraph and add the margin-bottom by using pure CSS?

Answer 1

You should be able to achieve this by setting display property to table value:

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

Use newlines as content of :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> 

Answer 3

Not sure if I fully understand your question, but this should do the trick:

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

Of course if you want to remove the margin just add margin:0

Answer 4

Disclaimer: This is a modified version of the code used on www.webdesignerdepot.com/ (hover a blog post title)

You can achieve something similar with a background gradient but adjusting the line-height will cause gaps between the rows. It also relies on the element being inline meaning that vertical margins won't work. Hence the <br> 's to separate the p 's:

Edit: you can get around the line height issue by adding some padding to the p 's

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