Menu
I've put it in a jsfiddle to demonstrate: https://jsfiddle.net/og90214y/
I need to set so the background follows the text and not <p> elements width. For that I've set display: inline.
For padding to both sides I've got box-shadow: 45px 0 0 #f00,-45px 0 0 #f00;, but this padding doesn't work on FireFox (works on Chrome), on FireFox it only works for the first line and for the rest there is padding, but without background color on it.
What could I do to make it work on FireFox as well and show padding + background color on those 45px at each end?
910
Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.
Put the text in an inline element, such as a <span> . And then apply the background color on the inline element. An inline element is as big as its contents is, so that should do it for you.
add this property box-decoration-break: clone; & remove box-shadow
.slider-text p {
background: #f00 none repeat scroll 0 0;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: #fff;
display: inline;
font-weight: 300;
line-height: 1.4;
margin-bottom: 10px;
padding: 0 20px;
}
https://jsfiddle.net/og90214y/6/
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
