Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

put a symbol after word enclosed in h3 or span in the same line with css

Put A Symbol After Word Enclosed In H3 Or Span In The Same Line With Css

put a symbol after word enclosed in h3 or span in the same line with css

Problem

I have crafted a webpage. It has many words enclosed in spans and h3 tags. Now I am trying to put some symbols at the end of text on the same line using CSS class. I can do this with class something like below using background-image property:

    .newtohtml5{
        width:fit-content;         
        background-image:url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
        background-repeat:no-repeat;
        background-size:2%;
        background-position-x:right;               
    }

However the problem with this class is that the HTML5 symbol appears at the end of the line leaving huge space between the text and symbol itself. I want that symbol appear exactly after the text in the span on the same line, not at the end of the line having huge space between the text and the symbol.

I will not like to make any changes to HTML. Though any solution is appreciated. But CSS only trick will be great.

Problem courtesy of: Mahesha999

Solution

Assuming you don't require full cross-browser support, and are okay using only those browsers that implement CSS3 generated content and you want that generated content to appear immediately after the text contained within the span, you can use the ::after pseudo-element:

text here 

With the CSS:

.newtohtml5::after {
    content: ' (generated content).'
}

JS Fiddle Demo.

It's worth noting that this generated content is after the content of the span, but still within, and a part of, the span itself.

You can also use attributes of the element to include in the generated content, for example, with the following CSS you can include the string contained within the class attribute:

.newtohtml5::after {
    content: ' (.' attr(class) ').';
}​

JS Fiddle demo.

You can also insert images into the content property:

.newtohtml5::after {
    content: url(http://lorempixel.com/25/25);
    margin-left: 1em;
}​

JS Fiddle demo.

Solution courtesy of: David Thomas

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

put a symbol after word enclosed in h3 or span in the same line with css

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×