SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to move :before and :after elements

    URL: http://goo.gl/cuwTZ9

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    e.g.
    Code:
    .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;
        height: 5px;
        width: 47px;
    }
    You could swap the background image for a border-top if you wanted (unless there's something special about that line).

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Paul. I'm using the images because I don't want the borders to be full width.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You have a width on the element so they borders will be the same as your background

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, that's true. One day I'll figure all this out. Thanks again for your help!!

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Without background image:
    Code:
    .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! )

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I use Firebug all the time but I just didn't think of this solution.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •