css - :before, :after 和填充

Question

我有以下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 图像也会“跳”下来。哪个是合乎逻辑的，但是有没有解决方案可以更好地与“整体形象”保持一致？

Answer 1

我倾向于absolute对 :before 和 :after 元素使用定位。然后你可以对父元素做任何你想做的事情，而不用担心你的伪元素会去任何地方（当然，除非你移动元素本身）。

在 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;
}

这显示了我将如何布置它们。然后，您可以使用任何您想要调整文本在父级中的位置的方法。

上述代码的关键点如下：

1. 父级相对定位。这允许我们对其子元素（伪元素）使用绝对定位，以将它们相对于它们的父元素放置。
2. 如果您希望元素是边框到边框，则前后元素的左右位置分别等于它们的宽度。

如果要将父级中的文本div垂直居中，并且它只是一行，则可以将 line-height 设置为等于容器的高度。在这里查看。这比“猜测”填充以使其垂直居中要好，如果这就是你想要的。

当然，还有其他方法可以使文本垂直居中，因此有很多关于该主题的 SO 问题。这里只有一个。

Answer 2

我只是根据rem值设置高度的样式，例如height: 2 rem. 无法确认这是最好的解决方案，但在 1 行代码中响应性非常完美。