Help with the Typesetting a Community School Homepage

MDN Learn
#1

Hello, I am currently working towards the Typesetting a community webpage and I am stuck. I am trying to have the image appear after the links. I have tried a couple different approaches.

First, I tried to use the a::after selector and then tried adding a background-size and a width/height but does not work to make the image the same size as the font.

Second I tried what I had seen online by using the a[href^=“https”] selector with a background size etc and that doesn’t even show the image.

What am I doing wrong?

My Codepen

Assignment I’m Working On

Thanks for the help in advance!

#2

Hello @Jon_Spurling

you doing great there was only 2 typo in your code

this
a[href^=“https”]

should be
a[href^=“https”]

the issue in the comma “ vs "

and this

Screenshot from 2021-01-25 16-33-36

there extra somthing looks like dots after .png in your code

and it should be

background-image: url(“https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png”);

hope that help and have a nice day :slight_smile:

#3

I have tried what you said to do, changed to: a[href^=“https”] and the background image to:
background-image: url(“https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png”);

but no picture still shows up, this is making no sense to me.

#4

Hello @Jon_Spurling

you still did not change it according to your link

and you also remove the backgroung repeat and size

so use this

a[href^="https"] {
background-image: url("https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png");
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: right;
  padding-right:20px;
}

hope that help and have a nice day :slight_smile:

1 Like