:before, :after 和填充
Posted
技术标签:
【中文标题】:before, :after 和填充【英文标题】::before, :after and padding 【发布时间】:2012-12-21 04:58:00 【问题描述】:我有以下 css 代码:
.readMore:before
content: '';
display: block;
float: left;
width: 10px;
height: 27px;
margin: 0;
background: red url('images/button.png');
background-position: 0 0;
.readMore
float: left;
height: 24px;
background: url('images/button.png');
background-position: -10px 0;
border: 0;
margin: 0;
padding: 4px 0 0 0;
cursor: pointer:
.readMore:after
content: '';
display: block;
float: right;
width: 10px;
height: 27px;
margin: 0;
top: -3px;
background: red url('images/button.png');
background-position: -411px 0;
如下所示的链接样式:
但是当尝试垂直调整 .readMore 中的文本时,:before 和 :after 图像也会“跳”下来。哪个是合乎逻辑的,但是有没有一种解决方案可以更好地与“整体图像”对齐?
【问题讨论】:
你在 :before 和 :after 中尝试过“重要”吗 感谢您的回答。尝试了以下padding: -4px 0 0 0 !important;
和 top: -4px !important;
都没有奏效。
你能搞个 JSFiddle 吗?
我不确定,但您可能必须在所有选择器中提供填充和顶部 .readMore:before padding:0px !important;顶部:0px !important .readMore 填充:4px 0px 0px 0px;顶部:0px; .readMore:在 padding:0px !important;顶部:0px !重要
您还可以将 BEFORE 和 AFTER 定义为 inline-block,然后使用 vertical-align 或 padding-top/margin-top。
【参考方案1】:
我倾向于为 :before 和 :after 元素使用absolute
定位。然后你可以对父元素做任何你想做的事情,而不用担心你的伪元素会去任何地方(当然,除非你移动元素本身)。
View on JSFiddle
html
<div></div>
css
div
position: relative;
background: #eee;
width: 25px;
height: 25px;
margin: 30px 0 0 30px;
div:before
position: absolute;
width: 10px;
height: 25px;
top: 0;
left: -10px;
content:"";
background: #222;
div:after
position: absolute;
width: 10px;
height: 25px;
top: 0;
right: -10px;
content:"";
background: #222;
这显示了我将如何布置它们。然后,您可以使用任何您想要调整文本在父级中的位置的方法。
以上代码的关键点如下:
-
父级相对定位。这允许我们对其子元素(伪元素)使用绝对定位,以将它们相对于其父元素放置。
如果您希望元素从边框到边框,则前后元素的左右位置分别等于它们的宽度。
如果要将父div
中的文本垂直居中,并且它只是一行,则可以将行高设置为等于容器的高度。 View that here。这比“猜测”填充以使其垂直居中要好,如果这就是你想要的。
当然,还有其他方法可以使文本垂直居中,因此有很多关于该主题的 SO 问题。 Here's just one.
【讨论】:
工作就像一个魅力。谢谢!【参考方案2】:我只是根据rem
值设置高度,例如height: 2 rem
。无法确认这是最好的解决方案,但响应性在 1 行代码中非常完美。
【讨论】:
以上是关于:before, :after 和填充的主要内容,如果未能解决你的问题,请参考以下文章
在 :before 或 :after CSS 中更改 SVG 填充颜色
:after/::after和:before/::before的区别