Positioning 'New' Graphic Around Link

[etidd]

Hi Sitepoint,

I’m attempting a bit of an overhaul on this page.

This step relates to the “download template instructions” link near the top inside of the pink test border.
I would like the flame graphic that says “new” to appear to the right and just a few pixels above the text line while maintaining the link directly in the center of the page.
Trying to decide the best way to do this. I have attempted this using the ::after pseudo-element, but it throws it off of center. Setting the graphic as the background to the containing div is my current strategy, but I am unable to overflow the padding box of the div.
Also, using a percentage value for the background-position shorthand causes the graphic to be fluid and does not maintain proper position in a narrow viewport size.

Your thoughts?

Here is my current code:
.instructionslink { background:url("new.gif") 68% -6px no-repeat; overflow:visible; border:3px solid pink; /* test border */ margin-top:18px; } .instructionslink a { font-size:1.7em; }

[Archibald]

Here is one way of centering the text but there may be a better way without using a ‘magic number’ in the CSS of the margin

[etidd]

Wow, that was a great response.
It makes sense to have the image placed into the HTML.
display:flex was unnecessary because the image shrinks and expands with the container.

Other than that, here is the final code:

<div class="instructionslink">
			<a href="#">Read the Template Instructions</a>
			<img src="style/new.gif" alt="new">
</div>

CSS:

.instructionslink {
	justify-content:center;
	overflow:visible;
	margin:15px auto 0 39px;
	padding:0 0 13px;
	
}
.instructionslink a { font-size:1.7em; margin-top:14px; }
.instructionslink img { margin:0 0 3px 7px; }

In the media queries at the bottom, I made the image scale down just a bit and move to block display for narrow viewports.

Looks good.

[Archibald]

Thanks for sharing your final code.

justify-content:center isn’t doing anything because it’s not a flex or grid container.

Check the position of the image when it’s below the text on narrow screens: it’s currently off-centre.

[etidd]

Okay, justify-content:center has been removed.

I’m aware that the image is a bit justified to the right.
I added padding-left:65px at line 199 because that’s the way I wanted it.