How to make after and before responsive?

Question

css

Hello. There is such a design:

spoiler

I made the arrows and the triangle using after and before pseudo-elements, and the blocks themselves - flexbox. And it turns out that the blocks are adaptive, and my pseudo-elements, when the blocks are compressed, leave the boundaries of the parent block. How to make them responsive so that they also shrink with the blocks?

CSS pseudo-element construction:

.news-block:after {
    content: '+';
    font-size: 35px;
    color: #fff;
    position: absolute;
    margin-top: -435px;
    margin-left: 260px;
}

.news-block:before {
    content: ''; 
    position: absolute;
    border: 50px solid transparent; 
    border-top: 50px solid #373737; 
    border-right: 50px solid #373737;
    margin-left: 200px;
    opacity: 0.8;
}

.news-block:hover:before {
    content: ''; 
    position: absolute;
    border: 50px solid transparent; 
    border-top: 50px solid #f26c4f; 
    border-right: 50px solid #f26c4f;
    margin-left: 200px;
    opacity: 0.8;
}

Answer 1

why margin-left ? absolutely arrange and everything will be in the herringbone: right: 0; etc