Different behavior of box-shadow in Chrome and Firefox

user_2232277 0
Viewed 246

I want to create something like this:

result

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 Chrome

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

css
2 Answers

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>

user_25332150

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>

user_76297140
Related