add an image to a link with CSS - possible?

Discussion in 'HTML' started by Tomasz Chmielewski, Nov 23, 2007.

  1. I have a part of a page which contains text links to other subpages:

    <a href="subpage.html">Subpage</a>

    Now, I'd like each link to contain a tiny image after each text:

    <a href="subpage.html">Subpage<img src="arrow.png"></a>


    Is it possible to do something similar with CSS only?

    Something like:

    a:after { content: blah_image }

    Which would add an image after each link?



    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Nov 23, 2007
    #1
    1. Advertising

  2. Tomasz Chmielewski wrote:

    > Is it possible to do something similar with CSS only?
    >
    > Something like:
    >
    > a:after { content: blah_image }


    Yes, you can do that -- and that's almost the exact syntax. Try:

    a:after { content: url('example.png'); }

    While the CSS spec seems to imply that in this case, the inserted image
    should form part of the clickable area too. But it's a little vague about
    this.

    However, you might achieve better browser support by instead using a
    right-aligned non-repeating background image on <a> elements and adding a
    little padding so that the anchor text doesn't overlap the image. This
    will give a similar appearance, but should be more reliable.

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 21:58.]

    It'll be in the Last Place You Look
    http://tobyinkster.co.uk/blog/2007/11/21/no2id/
    Toby A Inkster, Nov 23, 2007
    #2
    1. Advertising

  3. Tomasz Chmielewski wrote:
    > I have a part of a page which contains text links to other subpages:
    >
    > <a href="subpage.html">Subpage</a>
    >
    > Now, I'd like each link to contain a tiny image after each text:
    >
    > <a href="subpage.html">Subpage<img src="arrow.png"></a>
    >
    >
    > Is it possible to do something similar with CSS only?
    >
    > Something like:
    >
    > a:after { content: blah_image }
    >
    > Which would add an image after each link?


    no because generated content is just play text, no html. What you can do
    is make a special class with the image as a background and using
    padding to show the arrow.

    /* arrow.png is say 10x10px */

    a.subpage{
    padding-right: 12px;
    background: transparent url(arrow.png) no-repeat top right;
    }

    <a href="subpage.html" class="subpage">Subpage</a>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 23, 2007
    #3
  4. Tomasz Chmielewski

    Ben C Guest

    On 2007-11-23, Jonathan N. Little <> wrote:
    > Tomasz Chmielewski wrote:
    >> I have a part of a page which contains text links to other subpages:
    >>
    >> <a href="subpage.html">Subpage</a>
    >>
    >> Now, I'd like each link to contain a tiny image after each text:
    >>
    >> <a href="subpage.html">Subpage<img src="arrow.png"></a>
    >>
    >>
    >> Is it possible to do something similar with CSS only?
    >>
    >> Something like:
    >>
    >> a:after { content: blah_image }
    >>
    >> Which would add an image after each link?

    >
    > no because generated content is just play text, no html.


    [...]

    You can generate images with, e.g.:

    content: url("blah.png");

    You also should be able to do:

    a:after
    {
    content: "";
    background-image: url("blah.png");
    }
    Ben C, Nov 23, 2007
    #4
  5. Ben C wrote:
    > On 2007-11-23, Jonathan N. Little <> wrote:
    >> Tomasz Chmielewski wrote:
    >>> I have a part of a page which contains text links to other subpages:
    >>>
    >>> <a href="subpage.html">Subpage</a>
    >>>
    >>> Now, I'd like each link to contain a tiny image after each text:
    >>>
    >>> <a href="subpage.html">Subpage<img src="arrow.png"></a>
    >>>
    >>>
    >>> Is it possible to do something similar with CSS only?
    >>>
    >>> Something like:
    >>>
    >>> a:after { content: blah_image }
    >>>
    >>> Which would add an image after each link?

    >> no because generated content is just play text, no html.

    >
    > [...]
    >
    > You can generate images with, e.g.:
    >
    > content: url("blah.png");
    >
    > You also should be able to do:
    >
    > a:after
    > {
    > content: "";
    > background-image: url("blah.png");


    > }


    Ah, yes I remember seeing that was how your can get around the "no html"
    for generated content problem, at least for images. Hmmm could you do a
    funky CSS include? element:after { content: url(someinclude.html); }?

    Nope doesn't seem to work. Good thing, if it did it is a scary thought
    how how one could abuse it!

    To OP though, my background image method will work in IE, the generated
    content methods will not.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 23, 2007
    #5
  6. Jonathan N. Little schrieb:
    > Ben C wrote:
    >> On 2007-11-23, Jonathan N. Little <> wrote:
    >>> Tomasz Chmielewski wrote:
    >>>> I have a part of a page which contains text links to other subpages:
    >>>>
    >>>> <a href="subpage.html">Subpage</a>
    >>>>
    >>>> Now, I'd like each link to contain a tiny image after each text:
    >>>>
    >>>> <a href="subpage.html">Subpage<img src="arrow.png"></a>
    >>>>
    >>>>
    >>>> Is it possible to do something similar with CSS only?
    >>>>
    >>>> Something like:
    >>>>
    >>>> a:after { content: blah_image }
    >>>>
    >>>> Which would add an image after each link?
    >>> no because generated content is just play text, no html.

    >>
    >> [...]
    >>
    >> You can generate images with, e.g.:
    >>
    >> content: url("blah.png");
    >>
    >> You also should be able to do:
    >>
    >> a:after
    >> {
    >> content: "";
    >> background-image: url("blah.png");

    >
    >> }

    >
    > Ah, yes I remember seeing that was how your can get around the "no html"
    > for generated content problem, at least for images. Hmmm could you do a
    > funky CSS include? element:after { content: url(someinclude.html); }?
    >
    > Nope doesn't seem to work. Good thing, if it did it is a scary thought
    > how how one could abuse it!
    >
    > To OP though, my background image method will work in IE, the generated
    > content methods will not.


    Oh, this is getting problematic for me.

    All content is generated with a CMS engine, and adding a class="subpage"
    to each link element which needs an arrow is a bit hard for
    non-technical people.

    So, let's say the page looks like that - and I would like to add these
    tiny images to div with id="arrows":

    <div id="normal">
    <a href="normal.html">Normal link</a>
    </div>
    <div id="arrows">
    <a href="subpage.html">Link with an arrow image</a>
    </div>


    How should my CSS look like? I'm trying to achieve it for some time now,
    with no success.


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Nov 26, 2007
    #6
  7. Tomasz Chmielewski schrieb:

    (...)

    >> To OP though, my background image method will work in IE, the
    >> generated content methods will not.


    > How should my CSS look like? I'm trying to achieve it for some time now,
    > with no success.


    So, this is almost the one I was looking for:

    #arrows a {
    padding-right: 20px;
    background: url(arrow.png) no-repeat center right;
    content: "";
    }


    It works with IE (at least with IE7), but fails miserably with Konqueror
    - there are no links, only images :(



    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Nov 26, 2007
    #7
  8. Tomasz Chmielewski schrieb:
    > Tomasz Chmielewski schrieb:
    >
    > (...)
    >
    >>> To OP though, my background image method will work in IE, the
    >>> generated content methods will not.

    >
    >> How should my CSS look like? I'm trying to achieve it for some time
    >> now, with no success.

    >
    > So, this is almost the one I was looking for:
    >
    > #arrows a {
    > padding-right: 20px;
    > background: url(arrow.png) no-repeat center right;
    > content: "";
    > }
    >
    >
    > It works with IE (at least with IE7), but fails miserably with Konqueror
    > - there are no links, only images :(


    The 'content: "";' was confusing Konqueror - with this one, it looks
    fine in Firefox, IE7 and Konqueror:

    #arrows a {
    padding-right: 20px;
    background: url(arrow.png) no-repeat center right;
    }

    Thanks all for help!

    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Nov 26, 2007
    #8
  9. Tomasz Chmielewski wrote:
    > Tomasz Chmielewski schrieb:
    >
    > (...)
    >
    >>> To OP though, my background image method will work in IE, the
    >>> generated content methods will not.

    >
    >> How should my CSS look like? I'm trying to achieve it for some time
    >> now, with no success.


    Well firstly you was want to use CLASS not ID. With ID you can only have
    2 links per page "normal" and "arrows" because all IDs must be unique.
    So use CLASS.

    >
    > So, this is almost the one I was looking for:
    >
    > #arrows a {


    This is incorrect anyway, this means an A element *within* another
    element with an ID of "arrows". Should should been: a#arrows {...}



    > padding-right: 20px;
    > background: url(arrow.png) no-repeat center right;
    > content: "";

    ^^^^^^^^^^^^^^^^
    You don't need this. This is if you were inserting the image as content.
    You are not, it's a background.

    > }
    >
    >
    > It works with IE (at least with IE7), but fails miserably with Konqueror
    > - there are no links, only images :(



    a.arrows{
    padding-right: 20px;
    background: url(arrow.png) no-repeat center right;
    }

    <div class="arrows">
    <a href="subpage.html">Link with an arrow image</a>
    </div>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 26, 2007
    #9
  10. Jonathan N. Little schrieb:
    > Tomasz Chmielewski wrote:
    >> Tomasz Chmielewski schrieb:
    >>
    >> (...)
    >>
    >>>> To OP though, my background image method will work in IE, the
    >>>> generated content methods will not.

    >>
    >>> How should my CSS look like? I'm trying to achieve it for some time
    >>> now, with no success.

    >
    > Well firstly you was want to use CLASS not ID. With ID you can only have
    > 2 links per page "normal" and "arrows" because all IDs must be unique.
    > So use CLASS.
    >
    >>
    >> So, this is almost the one I was looking for:
    >>
    >> #arrows a {

    >
    > This is incorrect anyway, this means an A element *within* another
    > element with an ID of "arrows".


    So, below an A element is within a DIV element with an ID of arrows,
    isn't it?

    <div id="normal">
    <a href="normal.html">Normal link</a>
    </div>
    <div id="arrows">
    <a href="subpage.html">Link with an arrow image</a>
    </div>


    > Should should been: a#arrows {...}


    If I set it this way, it doesn't work (for id, at least, I didn't check
    with class).



    > a.arrows{
    > padding-right: 20px;
    > background: url(arrow.png) no-repeat center right;
    > }
    >
    > <div class="arrows">
    > <a href="subpage.html">Link with an arrow image</a>
    > </div>


    But I want to use id (I parse some elements with JavaScript).


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Nov 26, 2007
    #10
  11. Tomasz Chmielewski

    Ben C Guest

    On 2007-11-26, Tomasz Chmielewski <> wrote:
    > Tomasz Chmielewski schrieb:
    >> Tomasz Chmielewski schrieb:

    [...]
    >> #arrows a {
    >> padding-right: 20px;
    >> background: url(arrow.png) no-repeat center right;
    >> content: "";
    >> }
    >>
    >>
    >> It works with IE (at least with IE7), but fails miserably with Konqueror
    >> - there are no links, only images :(

    >
    > The 'content: "";' was confusing Konqueror - with this one, it looks
    > fine in Firefox, IE7 and Konqueror:
    >
    > #arrows a {
    > padding-right: 20px;
    > background: url(arrow.png) no-repeat center right;
    > }


    You don't need content: "" anyway-- that's not a :before or :after
    selector.
    Ben C, Nov 26, 2007
    #11
  12. Tomasz Chmielewski wrote:
    > Jonathan N. Little schrieb:
    >> Tomasz Chmielewski wrote:
    >>> Tomasz Chmielewski schrieb:
    >>>
    >>> (...)
    >>>
    >>>>> To OP though, my background image method will work in IE, the
    >>>>> generated content methods will not.
    >>>
    >>>> How should my CSS look like? I'm trying to achieve it for some time
    >>>> now, with no success.

    >>
    >> Well firstly you was want to use CLASS not ID. With ID you can only
    >> have 2 links per page "normal" and "arrows" because all IDs must be
    >> unique. So use CLASS.
    >>
    >>>
    >>> So, this is almost the one I was looking for:
    >>>
    >>> #arrows a {

    >>
    >> This is incorrect anyway, this means an A element *within* another
    >> element with an ID of "arrows".

    >
    > So, below an A element is within a DIV element with an ID of arrows,
    > isn't it?
    >
    > <div id="normal">
    > <a href="normal.html">Normal link</a>
    > </div>
    > <div id="arrows">
    > <a href="subpage.html">Link with an arrow image</a>
    > </div>
    >


    No you are correct I missed the DIV... #arrows a {} is correct for your
    application.


    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 26, 2007
    #12
  13. Tomasz Chmielewski wrote:

    > The 'content: "";' was confusing Konqueror - with this one, it looks
    > fine in Firefox, IE7 and Konqueror:


    'content: ""' wasn't *confusing* Konqueror. Konqueror was rendering it
    completely correctly, as 'content: ""' means 'display no content'.

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 2 days, 14:51.]

    It'll be in the Last Place You Look
    http://tobyinkster.co.uk/blog/2007/11/21/no2id/
    Toby A Inkster, Nov 27, 2007
    #13
  14. Toby A Inkster schrieb:
    > Tomasz Chmielewski wrote:
    >
    >> The 'content: "";' was confusing Konqueror - with this one, it looks
    >> fine in Firefox, IE7 and Konqueror:

    >
    > 'content: ""' wasn't *confusing* Konqueror. Konqueror was rendering it
    > completely correctly, as 'content: ""' means 'display no content'.


    In that case, Firefox and IE7 can't render 'content: ""' CSS element
    correctly.


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Nov 27, 2007
    #14
  15. Tomasz Chmielewski

    Ben C Guest

    On 2007-11-27, Tomasz Chmielewski <> wrote:
    > Toby A Inkster schrieb:
    >> Tomasz Chmielewski wrote:
    >>
    >>> The 'content: "";' was confusing Konqueror - with this one, it looks
    >>> fine in Firefox, IE7 and Konqueror:

    >>
    >> 'content: ""' wasn't *confusing* Konqueror. Konqueror was rendering it
    >> completely correctly, as 'content: ""' means 'display no content'.

    >
    > In that case, Firefox and IE7 can't render 'content: ""' CSS element
    > correctly.


    It's Konqueror that's wrong. The content property only applies to
    :before and :after pseudo-elements. IIRC you had it in an ordinary
    selector without :before or :after. It should do nothing to those
    elements.

    It's not supposed to rewrite the content of a normal element, at least
    not in CSS 2.1.
    Ben C, Nov 27, 2007
    #15
  16. Ben C wrote:

    > It's Konqueror that's wrong. The content property only applies to
    > :before and :after pseudo-elements. IIRC you had it in an ordinary
    > selector without :before or :after. It should do nothing to those
    > elements.


    Konqueror (partially) supports the draft CSS 3 model of the content
    property -- KHTML in general seems to have implemented a lot of these
    things very early.

    I was also under the impression that I'd had an e-mail exchange with HÃ¥kon
    Wium Lie about this issue in some of the earlier CSS 2.1 drafts, but going
    back to my old records, that exchange was actually about an error where it
    was written that white-space only applied to block elements.

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 3 days, 22 min.]

    It'll be in the Last Place You Look
    http://tobyinkster.co.uk/blog/2007/11/21/no2id/
    Toby A Inkster, Nov 27, 2007
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    0
    Views:
    1,353
  2. =?Utf-8?B?RGF2ZQ==?=

    Dynamically add link to css stylesheet?

    =?Utf-8?B?RGF2ZQ==?=, Nov 1, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    11,806
    Justin Beckwith
    Nov 2, 2004
  3. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    810
    Kevin Spencer
    May 17, 2005
  4. Noozer
    Replies:
    5
    Views:
    52,340
  5. Laszlo Zsolt Nagy
    Replies:
    1
    Views:
    1,270
    Kartic
    Jan 26, 2005
Loading...

Share This Page