Как сделать адаптивным after и before?

Question

[uRoot]

Привет. Есть такая конструкция:

spoiler

Стрелки и треугольник я сделал при помощи псевдоэлементов after и before, а сами блоки - flexbox. И выходит, что блоки адаптивные, а мои псевдоэлементы при сжатии блоков покидают границы блока-родителя. Как правильно сделать их адаптивными, чтобы они тоже сжимались вместе с блоками?

CSS конструкция псевдоэлементов:

.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

[Максим]

почему margin-left ? абсолютно расположить и всё будет в ёлочку : right:0; и т д

Comments

[uRoot]

Замена на right:0; не помогла. Видимо где-то косяк в верстке

[Максим]

Denny Schwarz, всю вёрстку поместите на jsfiddle.net и скиньте ссылку мне - я посмотрю что не так

[uRoot]

Максим Ленский, а я понял в чем была причина. У родительского блока не было position: relative;, и из-за этого элементы неправильно позиционировались.