: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 填充颜色

触发器before和after有啥区别?

:after/::after和:before/::before的区别

CSS 巧用 :before和:after

:before/:after与::before/::after的区别 和属性content:值

after::和before::的用法