How to move :before and :after elements


Hi again,

I am having trouble moving a couple background images that I’ve applied using :before and :after. If you look near the top of the home page, you’ll see the date right above the “Finding Nemo…” post title. There are lines on either side of the date. How can I move those up so they are centered on the text? I also need to move them a little bit further away from the text so the text has about 5px of space on both sides.

When I try changing the background position, the lines just disppear instead of move. What am I missing?

Thanks for all your help!


Just try adjusting the height and the background image will move upwards.


.home-top .entry-time:before, .home-top .entry-time:after {
    background: url("images/line.png") no-repeat scroll 0 0 transparent;
    content: "";
    display: inline-block;
    [B]height: 5px;[/B]
    width: 47px;

You could swap the background image for a border-top if you wanted (unless there’s something special about that line).

Thanks so much, Paul. :slight_smile: I’m using the images because I don’t want the borders to be full width.

You have a width on the element so they borders will be the same as your background :slight_smile:

Oh, that’s true. :slight_smile: One day I’ll figure all this out. Thanks again for your help!!

Without background image:

.home-top .entry-time:before,
.home-top .entry-time:after {
    border-top: 1px solid #AAAAAA;
    content: "";
    display: inline-block;
    height: 4px;    /* vert. distance */
    margin: 0 10px; /* hor. distance */
    width: 47px;

(Thanks, Firebug! :slight_smile: )

Thanks. :slight_smile: I use Firebug all the time but I just didn’t think of this solution.