Menu
I want to create something like this:
I prepared the following testing page:
p {
display: inline;
background-color: yellow;
box-shadow: 10px 0px 0px red, -10px 0px 0px red;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.
Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text.
Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text.
Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.</p>
</body>
</html>However the result looks differently in Chrome and Firefox. From my point of view Chrome version is OK, but I don't like the result in Firefox.
Chrome
Firefox
Is there any way how to achieve in Firefox the same result as in Chrome? I'm open to any solution, it is not necessary to use box-shadow property.
968
Isn't box-decoration-break:clone what you are after?
p {
display: inline;
background-color: yellow;
box-shadow: 10px 0px 0px red, -10px 0px 0px red;
box-decoration-break: clone;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.
Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text.
Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text.
Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.</p>
</body>
</html>As per your comment am posting this answer -
Here is a workaround for you using :after to get the result as per your image.
p {
display: inline;
line-height:20px;
background-color: yellow;
position:relative;
}
.p-wrapper{
position:relative;
display:inline-block;
}
.p-wrapper:after{
content:'';
background:#000;
position:absolute;
left:-10px;
right:-10px;
top:-10px;
bottom:-10px;
z-index:-1;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="p-wrapper">
<p>Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.
Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text.
Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.Here will be a text. Here will be a text. Here will be a text.
Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text. Here will be a text.</p>
</div>
</body>
</html>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
