---
title: "css ha en bild framför och före en länk."
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/183626-css-ha-en-bild-framför-och-före-en-länk"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "noshornin"
published: "2010-05-28T17:21:48.000Z"
updated: "2010-05-31T06:42:11.000Z"
replies: 11
views: 1182
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/183626-css-ha-en-bild-framför-och-före-en-länk"
---

# css ha en bild framför och före en länk.

## #1 — noshornin, 2010-05-28T17:21Z

Jag vill göra så att alla länkar av en viss sort ska få en bild framför och bakom sig. alltså om jag skriver:

```
<a class="alink" href="#">hej</a>
```

så ska det se ut så här: en bild - hej - en bild. Går det att fixa det i css?

Permalänk: https://www.webforum.nu/p/183626

## #2 — tanten, 2010-05-28T17:44Z

Prova med:

```php
.alink:before {
  content: url(dinbild.png);
}
```

och/eller med :after

Med speciella länkar t.ex till video

```php
a[href$='.mov']:after {
  content: url(dinbild.png);
}
```

Det är css3 och jag har inte testat det i alla webläsare, men... du kan ju prova :)

Permalänk: https://www.webforum.nu/p/2238784

## #3 — voigtann1, 2010-05-28T18:37Z

Eller om du vill ha stöd för de flesta webbläsare idag så kom frågan upp igår: <http://www.webforum.nu/showthread.php?t=179447>

Permalänk: https://www.webforum.nu/p/2238787

## #4 — noshornin, 2010-05-29T09:23Z

Jag ändrade voigtanns kod så att det gick med två bilder:

```
.aLink {
background-image: url(bilder/pil.gif), url(bilder/pil2.gif);
background-repeat: no-repeat;
background-position: 0% 50%, 100% 50%;
display: inline-block;
padding-left: 16px;
padding-right: 16px;
}
```

Permalänk: https://www.webforum.nu/p/2238811

## #5 — noshornin, 2010-05-29T12:16Z

eller jag såg nu att min kod inte funkade i ie!

verkar som om man inte kan ha två bakgrundsbilder i samma element i css 2. IE har inte uppgraderat till css 3. Hur ska jag göra då?

Permalänk: https://www.webforum.nu/p/2238824

## #6 — voigtann1, 2010-05-29T12:31Z

nej, det har dom inte stöd till, en bakgrundsbild per element

Permalänk: https://www.webforum.nu/p/2238825

## #7 — noshornin, 2010-05-29T12:33Z

hur ska jag göra dåda?

Permalänk: https://www.webforum.nu/p/2238826

## #8 — voigtann1, 2010-05-29T12:40Z

> **[noshornin skrev:](https://www.webforum.nu/p/1505921)**
>
> hur ska jag göra dåda?

> **[voigtann1 skrev:](https://www.webforum.nu/p/1505920)**
>
> nej, det har dom inte stöd till, en bakgrundsbild per element

Du få ha två element med en varsin bakgrund, varför skall du ha det? Din fråga ha "En bild" inte flera.

Permalänk: https://www.webforum.nu/p/2238827

## #9 — noshornin, 2010-05-29T13:19Z

Jag skrev väll frågan fel. Jag vill ha en bild både framför och efter länken. Men hur ska jag ha två element på ett snyggt sätt? Så här ser det ut nu:

```
<p><a class="aLink" href="#">...</a></p>
```

```
.aLink {
background-image: url(bilder/pil.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
display: inline-block;
padding-left: 16px;
padding-right: 16px;
}
```

Hur ska jag göra för att få en bild efter länken också?

Permalänk: https://www.webforum.nu/p/2238829

## #10 — voigtann1, 2010-05-29T13:29Z

hade hellre kört span än en paragraf:
<http://voigt.se/sandbox/wf/link-css/>

Se kod igen, är mer eller mindre exakt samma sak som tidigare.

Permalänk: https://www.webforum.nu/p/2238830

## #11 — noshornin, 2010-05-29T13:41Z

danke!

Permalänk: https://www.webforum.nu/p/2238831

## #12 — StefanBergfeldt, 2010-05-31T06:42Z

Tekniken används rätt ofta för att få till runda hörn, mycket smidigt tills CSS3 blir standard

Permalänk: https://www.webforum.nu/p/2238929

---

Tråden på webben: https://www.webforum.nu/amne/html-css/183626-css-ha-en-bild-framför-och-före-en-länk