:before, :after and padding

Question

I have the following CSS code:

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

Which styles a link that looks like this:

But when trying to adjust the text in the .readMore in vertical, the :before and :after images also get "jumps" down. Which is logical, but is there a solution, so it will align better with the "total image"?

Answer 1

I tend to use absolute positioning for :before and :after elements. Then you can do whatever you want to the parent without worrying about your pseudo elements going anywhere (unless, of course, you move the element itself).

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

This shows how I would lay them out. You can then use any method you want to adjust the position of the text in the parent.

The key points of the above code are the following:

1. The parent is relatively positioned. This allows us to use absolute positioning on its children, the pseudoelements, to place them in relation to their parent.
2. The left and right position of the before and after elements, respectively, is equal to their width if you want the elements to be border-to-border.

If you want to center the text in the parent div vertically, and it's just a single line, you can set the line-height equal to the height of the container. View that here. This would be better than 'guessing' the padding to make it vertically centered, if that's what you're going for.

Of course, there are other ways to center the text vertically, too, and accordingly there are lots of SO questions on the subject. Here's just one.

Answer 2

I just styled the height based on rem values, e.g., height: 2 rem.

I can't confirm that's the best solution, but for responsiveness it worked out quite perfectly in one line of code.