Question

We are trying unsuccessfully to use a single image as a bottom border. See our attempt here: Use border image only for bottom border? Our CSS seems to replicate the image across the whole div instead

Now we’re attempting to use the “after” pseudo element as a border bottom image.

The problem is we cannot define the size of the image in the content property nor make it repeat across the width of the pseudo element. Is this possible?

Answer 1

.some-div:after {
    content: '';
    display: block;
    width: 100px; /* example */
    height: 2px;
    background: url('../images/path-to-your-image.png') repeat-x;
}

You just have to add some positioning based on your code (float, absolute, anything).