<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
我有一个伪类 :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';}
最佳答案
你可以利用行高属性
请参阅下面的代码段，先是 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>希望对你有帮助
关于html - :before with an image and content :"" place the content in the bottom right corner，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44976269/
相关文章：
html - 我可以多次使用 <h1> 标记，一个用于桌面，另一个用于移动吗？
javascript - 为什么 "element.innerHTML+="是错误代码？
javascript - 一个动画位置如何使用 CSS -webkit-animation
javascript - jQuery:等同于 CSS 的 .live()？
javascript - 从 HTML JavaScript 更改 js 中的变量值？
html - Bootstrap 标签文本坚持输入字段的下线
javascript - JS监控CSS属性变化如 "display:none"= >"display:block"？