position:absoluteで指定した擬似要素の画像が動く

Question

お世話になっております。

以下の画像のように右斜め上(before)と、左斜め下(after)に擬似要素を表示させ、レスポンシブ対応にも対応できるようにしたいです。
右斜め上は動かないんですが、左斜め下は画面幅によって位置が動きます。

左斜め下も動かしたくないのですが、解決方法がわかりません、、、。
どなたか、ご教授の程よろしくお願い致します。

 <div class="price_txt"></div>

.price_txt {
	position: relative;
	background-color: #eae4e2;
}

.price .price_inner .price_txt::before {
		display: inline-block;
		content: url(../img/text_inner_up_sp.png);
		position: absolute;
		top: 0;
		left: 0;
		width: 10vw;
		height: 10vw;
		-webkit-transform: scale(0.5);
		-ms-transform: scale(0.5);
		transform: scale(0.5);
	}

	.price .price_inner .price_txt::after {
		display: inline-block;
		content: url(../img/text_inner_down_sp.png);
		position: absolute;
		bottom: 20%;
		right: 30%;
		width: 10vw;
		height: 10vw;
		-webkit-transform: scale(0.5);
		-ms-transform: scale(0.5);
		transform: scale(0.5);
	}

##素材

Comments

[退会済みユーザー]

全体のコードを掲載してくだしあ

[x_x]

左右逆じゃないんですか？

Answer 1

右下の場合

    .price .price_inner .price_txt {
        position: relative;
    }

    .price .price_inner .price_txt::after {
        content: '';
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background: url(../img/text_inner_down_sp.png);
        background-size: 100% 100%;
    }

Comments

[kurisu_0404]

ご教授頂いたソースで試したら、うまく行きました！！
ありがとうございます。