:before with an image and content:" " 将内容放在右下角

Question

我有一个伪 class :before 背景图像 300x200px 和 css 内容：" " 是背景的名称，应位于右下角

我用过

text-align:right;

并使用填充来降低文本，但这会增加元素的高度，因此我需要其他解决方案。不，我不能为文本使用单独的元素。

编辑：我无法显示代码，因为它是用于 subreddit 样式表的，而且 css 比我可以显示的要多得多

#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，然后是 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

希望对您有所帮助..

:before with an image and content:" " 将内容放在右下角

:before with an image and content:" " place the content in the bottom right corner

html

css

reddit