：画像とコンテンツを含む前：コンテンツを右下隅に配置します

Question

私は擬似クラスを持っています：前に背景画像300x200pxとCSSコンテンツ： ""はバックグラウンドの名前であり、右下隅

に私は

text-align:right; 

を使用してテキストをダウンさせるパディング使用されるが、私はこのために他のソリューションを必要とするので、それは要素の高さを吹きます。そして、いいえ、私はテキストのために別の要素を使うことはできません。

編集：それはsubredditスタイルシートのためだと私はあなたがライン-heightプロパティを利用することができます

#header [name='uh']~a:before, body>.side:before { 
position: absolute; 

width: 298px; 
content: ''; 
text-align: right; 
padding-top: 375px; 
padding-right: 2px; 
color: rgba(64, 92, 120, 0.7); 
top: -207px; 
right: -300px; 
background-size: contain; 
background-repeat: no-repeat; 
background-position: center; 
} 

body>.side:before { 
top: 70px; 
z-index: 100; 
top:-200px; 
right:0; 
} 
#header [name='uh'][value$='0'] ~ a:before { background-image: url(%%1%%); content: '/u/Hisfantor';} 

Answer 1

を示すことができたものをすることを、その後ずっと、CSSがあるので、私はコードを表示することはできません

CSSとHTMLのスニペットをご覧ください。

.test { 
 
    position: relative; 
 
    height: 300px; 
 
} 
 

 
.test::before { 
 
    content: "image"; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    height: 300px; 
 
    width: 300px; 
 
    text-align: right; 
 
    line-height: 600px; 
 
    background-image: url("https://hub.91mobiles.com/wp-content/uploads/2016/09/Google-Now-launcher.png"); 
 
}

<div class="test"></div>

Link for reference

私はあなたが同様にあなたのコードを提供し、あなたの答えを更新でき