Keep the fading in between the border-top and border-bottom in css

Question

I am trying to get a fade on the post content, just like the title. See image.

However, I can't manage to make it sit in between the top and bottom border.Here is the code.

This is the post Message container.

.PostMessage{
max-height: 6em;
overflow:hidden;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
}

Here is the fading.

.PostMessage::before{
position:absolute;
content: '';
background: linear-gradient(to right, transparent 93%, red 99%);
width: calc(100% - 61px);
max-width: 728px;
height: 97px;
pointer-events: none;
}

Here is the html:

<div class="PostContainer">

        <div class="PostContainerMetadata">
            <p class="PostContainerMetadataID">Post id # <a href="">23</a></p>
            <p class="PostContainerMetadataInfo"> <a href="">Videogames</a> • Posted by <a href="">user</a> on xx-xx-xx</p>
        </div>

        <div class="PostTitle">
            <h2>Title of post</h2>
        </div>

        <div class="PostMessage"><pre><code>This is a short message.</code></pre></div>

    </div>

Answer 1

TL;DR. Replace fixed height with a flexible one. (See code snippet)

As noted in the comment, .PostMessage has a flexible height with a max-height of 6em whereas its ::before pseudo-element has a static height of 97px, which makes the ::before taller than the element itself.

You can add position: relative to the main .PostMessage element, and use top: 0; and bottom: 0; for its ::before pseudo-elements, and remove height of it.

.PostMessage {
  max-height: 6em;
  overflow: hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 10px;
  position: relative;
}

.PostMessage::before {
  position: absolute;
  content: '';
  background: linear-gradient(to right, transparent 93%, red 99%);
  pointer-events: none;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<div class="PostMessage">
  short message
</div>

<br />
<br />

<div class="PostMessage">
  longer message <br /> spanning over <br /> multiple lines <br /> here <br /> .
  <br /> .
  <br /> .
  <br /> .
  <br /> .
  <br /> .
  <br />
</div>