Is it possible to position the Sprite image to the right of the anchor tag?

I have a CSS sprite image that is functioning correctly, but I am encountering an issue where the image is displaying on the left side of the anchor tag's text instead of the right. You can view the sprite image here.

Expected result:

[Mylinktext]<MyImagehere>

The actual result I am getting is 

<MyImagehere>[Mylinktext]

I do not want to use the after pseudo-class because it will not work in IE7. Here is my code:

.ctrls
    {
        font-family:Arial;
        font-weight:bold;
        font-size:16px;
        color:black;
        background-image: url(images/ctrlsprite.png);
        //background-image: url(images/css-sprite.png); 
        background-repeat:no-repeat;
        text-decoration:none;
        display: inline-block;
        padding-left:30px;  
    }
    .ctrls:hover
    {
        background-position: 0px -252px;
        text-decoration:underline;      
    }
    a.magenta
    {
        background-position:0px -144px;
    }

And HTML:

<div>
    <p>Magenta</p>
    <a href="#" class="ctrls magenta">Et Movet</a>
</div>

How can I position the image to the right side of the text?

csscss-sprites

Answer №1

What if we include a <span> element on the right side of the text within the anchor tag? See the demonstration here.

HTML

<div>
    <p>Magenta</p> <a href="#" class="ctrls magenta">Et Movet <span class="icon"></span></a>
</div>

CSS

.ctrls {
    font-family:Arial;
    font-weight:bold;
    font-size:16px;
    color:black;
    text-decoration:none;
}
.ctrls:hover {
    text-decoration:underline;
}
.ctrls .icon {
    display: inline-block;
    background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
    background-repeat:no-repeat;
    width: 16px;
    height: 16px;
    background-position:0px -144px;
}
.ctrls:hover .icon {
    background-position: 0px -252px;
}

Answer №2

Upon testing your code, it appears that the output aligns with your desired result: [Mylinktext]<MyImagehere>. I may be overlooking something significant. Please elaborate on what you require clarification on, and I will do my best to assist you.

Personally, I opt not to utilize a sprite. Instead, I prefer creating individual images for each color (as I find it more convenient) or, even better, designing a font containing the specific character I need (for reference: ; I have yet to experiment with any of the tools mentioned, so I cannot vouch for their efficacy) and subsequently implementing the @font-face Rule (for reference: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the jQuery.ScrollTo plugin to smoothly scroll an element to the middle of the page both vertically and horizontally, or towards the center as much as possible

Visit this link for more information Have you noticed that when scrolling to an element positioned to the left of your current scroll position, only half of the element is visible? It would be ideal if the entire element could be visible and even centere ...

javascriptjqueryhtmlcss

The li elements in a horizontal menu all have equal spacing between them, filling the width of the ul

I designed a horizontal menu navigation system using HTML elements ul for the main menu container and li for menu list items. The layout is structured with display table for ul and table-cell for li. However, I encountered an issue where there are inconsis ...

htmlcss

Arrange pictures and div elements in a horizontal layout

I am facing an issue with my code that is displaying 5 'cards' in a messed up layout instead of a straight line. I have tried to align them vertically, but some are still higher and not in the right positions. For reference, I want the layout to ...

javascripthtmlcssimage

Tips for aligning a single item to the center in a Bootstrap navigation bar that has the majority of items on the right

I am attempting to center the text "Welcome:" within the navbar without center aligning the entire navbar. I want the navbar to remain right aligned, but only the "Welcome:" portion should be centered. Here is what I have tried so far... <!DOCTYPE html ...

htmlcssbootstrap-5

How come when I applied height:100% and position: absolute to .test2, it ended up being 200px instead of the expected 204px

Upon setting the height of a container element to 200px, I encountered an issue when trying to set the height of another element within it to 100%. The height didn't render as expected, as height:100% takes the height of the parent element, which was ...

htmlcss

The issue persists with the customized Bootstrap carousel featuring thumbnails

By combining http://codepen.io/srkimir/pen/mGbrf and http://codepen.io/transportedman/pen/NPWRGq , I successfully created a fading carousel with thumbnails similar to the one in http://codepen.io/kikibres/pen/gpZoXz . However, when trying to implement ...

jquerycsstwitter-bootstrapcarouselthumbnails

CSS animations failing to transition properly in Firefox

It seems that despite following all the necessary steps in my CSS, I am facing an issue with a transition not working properly in Firefox. The bounce-in effect I have implemented is failing to function as expected in this browser, even though Firefox does ...

cssfirefoxcss-animationskeyframe

What is the best way to integrate LESS css into a Reactjs application?

I am looking to incorporate LESS into my React app, but I have been unsuccessful in finding a solution through Google. As a newcomer to ReactJs, I lack deep knowledge and would greatly appreciate guidance on installing Less. If anyone is able to help me ...

javascripthtmlcssreactjsless

Bottom-fixed navigation bar with adhesive functionality

I have been attempting to create a navigation bar that starts at the bottom of the page and then sticks to the top as the user scrolls, similar to the functionality on this website (http://grovemade.com). However, I have had little success so far. Could s ...

jqueryhtmlcss

Adjusting webpage zoom based on different screen sizes

Hey there, I ran into an issue with my web page design. It looks great on my desktop monitors, but when I checked it on my laptop, things went haywire. Strangely, adjusting the zoom to 67% seemed to fix the problem. Both screens have a resolution of 1920 ...

javascripthtmlcsszooming

element obscured by overlapping elements

I'm unsure why this issue is occurring; it seems to be a CSS error, but I can't pinpoint the exact location. Working on this in Rails, so I'm relatively new to it, but it should follow standard CSS practices! https://i.sstatic.net/OtO6O.jp ...

htmlcss

Creating a notification for specific choices in a dropdown menu

I am working on a form that includes a select element with multiple options. Depending on the option selected, a different form will be displayed. My concern is if a user starts filling out one form and then decides to select another option, I want to add ...

javascriptjqueryhtmlcssforms

Floating multiple block-level elements within an <li> tag in HTML allows for greater control over the layout and

I am facing a complex issue that requires attention. Let me explain the situation: There is an unordered list consisting of list items displayed vertically with alternating background colors, all having the same width within a fixed-width div. Some list i ...

htmlcssblockhtml-listsfixed-width

Application with menu design, similar to the layout of google.com on mobile devices

Have you seen the Android smartphone with Chrome from GOOGLE.COM? Did you notice the pop-up MENU that looks similar to an application? This menu has a "SPRING" effect, and I'm curious how Google achieved this result. I tried using the property "-web ...

javascriptandroidjqueryhtmlcss

Enhance your textbox with more detailed descriptions than just displaying NaN

I am working on a form that includes select boxes. If a user selects an option from "Convert From" and another option from "Convert To" but does not enter a number in the input field, instead of displaying NaN in the result text box, I would like to show ...

javascriptjquerycss

Use jQuery to insert the TEXT heading as an input value

Can anyone help me with copying text from a heading to an input value? Here's an example: <h2 class="customTitleHead">This is a Heading</h2> I want to transfer the text from the heading into an input field like this: <input type="tex ...

javascriptjquerycsshtml

What steps can I take to have the text extend beyond the background at both the top and bottom edges?

I am attempting to replicate this design using CSS: https://i.sstatic.net/zXInr.png So far, this is what I have achieved: .container{ height: 30px; margin-bottom: 10px; } .redLine{ background-color: red; opacity: 0.5; height: 20px; bor ...

css

Displaying a hidden div using the jQuery .each() method

Attempting to validate a form using jQuery, the goal is to target all form fields with class="required" and utilize the .each() function to verify if the field is empty. If it is empty, a hidden div positioned relative to the field should be displayed. An ...

javascriptjqueryhtmlcss

What is the best way to change the orientation of a scanner loop animation to

Currently, I have a CSS style featuring an animation that scans across a line in a loop. My goal is to apply this animation to a horizontal line, but I am struggling to figure out how to rotate the scanner for a horizontal loop. Below is my current code. A ...

htmlcss

Adjusting the width of the body container in a 2-column layout with menu padding is causing gaps to appear on the right side of

I'm having trouble getting my body div to fill the width of the page and align with the right side of my sidebar. Whenever I add padding to the sidebar, it creates blank space on the right that I can't seem to get rid of. Here is the code I am us ...

cssxhtml