1

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:

enter image description here

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?

Community
  • 1
  • 1
chris
  • 2,109
  • 2
  • 23
  • 33

4 Answers4

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>
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • "display: table" shows the background color of the paragraph as block and not line wise. – chris Feb 13 '15 at 14:56
1

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>
Alexander Shutau
  • 2,660
  • 22
  • 32
  • Background should take as much space as needed by text width and not 100%. Check the image in the question. – dfsq Feb 13 '15 at 12:44
  • The "display: inline-block;" shows the background-color for the whole block and not line wise, like the screenshot shows. – chris Feb 13 '15 at 15:10
  • Edited again. No margin-bottom, but you can hack with newlines count and font-size. – Alexander Shutau Feb 13 '15 at 16:26
0

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

greatTeacherOnizuka
  • 555
  • 1
  • 6
  • 24
  • I need "display: inline;" because I don't want to have the background-color behind the whole paragraph but behind each line. See screenshot. – chris Feb 13 '15 at 15:41
0

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>
Turnip
  • 35,836
  • 15
  • 89
  • 111
  • In your example the "

    " does the margin-bottom, but I can't add additional html :-(     – chris Feb 13 '15 at 15:07
  • Yeah sorry. I realised afterwards. I've been trying to find a way to make this work without the br's but I'm struggling – Turnip Feb 13 '15 at 15:11