Button using three (3) background images css

Question

I'm trying to make a button using three background images so that we can pull in translations for the the text of the button and expand nicely. We'll probably add a base style for IE8 but our designer wants us to use this style and we couldn't recreate it nicely with pure CSS3. Here are the images: Here's the HTML (just a simple button, but thought I should put it anyway: ``` ``` I've already tried a couple of things; I'll paste the CSS of both attempts. Attempt 1: Using Pseudo-selectors http://jsfiddle.net/c2B6X/ ``` .back { background: url("images/back-middle.png") 14px 0 repeat-x; color: $white; height: 28px; padding: 5px; &:before { background: url("images/back-front.png") 0 0 no-repeat; width: 14px; } &:after { background: url("images/back-end.png") 100% 0 no-repeat; width: 8px; } } ``` Attempt 2: Three `background-image`s http://jsfiddle.net/nPUQN/ ``` .back { background: none; ba…

Accepted Answer

Pseudo-content requires content, so you'll first need to specify that:

```
.selector::before {
  content: ' ';
}
```

Then to define any layout such as width and height you'll need to display the pseudo elements as a `block` or `inline-block`. Block layout will force each pseudo element to wrap and `inline-block` will sit on the line so you'll either have to use floats or absolute positioning.

```
.selector {
  position: relative;
  height: 28px;

/* allow for the pseudo-elements which do not have layout due to absolute positioning */
  margin: 0 15px;
}
.selector::before,
.selector::after {
  content: ' ';
  position: absolute;
  top: 0;
  width: 15px;
  height: 28px;
}
.selector::before {
  left: -15px;
}
.selector::after {
  right: -15px;
}
```

Demo here for you: http://codepen.io/anon/pen/yaJGI

Button using three (3) background images css

Solution

Problem