Put Title/Alt Attributes into CSS: After { Content: Image }

Put title/alt attributes into CSS :after { content: image }?

No, content only accepts raw text and image data, not HTML.

You need to use JavaScript to dynamically add tooltips to your existing HTML elements.

As for the icon, you could use a background image and some padding:

a.pdf-link {
    padding-left: 2px;
    padding-right: 20px;
    background: url(../images/icon-pdf-link.gif) right center no-repeat;
}

If you need to specifically have a tooltip only on the icon, though, you need to do everything in JavaScript as the comments say.

Can I style an image's ALT text with CSS?

Setting the img tag color works

img {color:#fff}

http://jsfiddle.net/YEkAt/

body {background:#000022}img {color:#fff}

<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />

Img file name as title & alt attribute from CSS

$('img').attr({ //change multiple attributes
    title: $(this).attr('src').replace('_', '').replace('.jpg', ''), //to the src attr without _ and .jpg
    alt: $(this).attr('src').replace('_', '').replace('.jpg', '')
});

You can't use content because:

CSS has a property called content. It can only be used with the pseudo
elements :after and :before. It is written like a pseudo selector
(with the colon), but it's called a pseudo element because it's not
actually selecting anything that exists on the page but adding
something new to the page.

This will put text in front or after an element, but does not change it's properties!

using title attribute of an img as image legend?

Hi and welcome to StackOverFlow !

The image attributes aren't mean to be displayed under the picture.

Instead you could use something like a <figcaption> under the image declaration to put it under your picture.

With this in mind, you code your code will kind of look like this :

<figure>
  <img alt="cat picture" src="pet-cat-eye.jpg"/>
  <figcaption>This is my cat's legend</figcaption>
</figure>

Let me know if that work !

For further note :
The title attribute is used when you mouse hover a picture as a tooltip.

To provide title attribute for an background image inside div tag

You can put a title attribute on the div. Since the background-image repeats by default, it will fill the div.

<div title="Smiley" style="background:transparent url(image/smiley.jpg) left bottom; cursor:pointer;">

But assume for a moment that the image was set to no-repeat and was smaller than the div itself. In that case, you could not (without JavaScript) display a tooltip only when the cursor is over the background-image.

CSS - Style the title from the image tag

It should be content: attr(title);, not content: attr(data-title); - you don't have a data attribute.

Also, it seems ::before and ::after pseudo-elements are not defined for img - you may have to use something else:

CSS Content attribute for IMG tag

Working Example (when the image is missing): http://jsfiddle.net/DMAFm/

Another example, with the title on the <a> tag: http://jsfiddle.net/DMAFm/1/

Put Title/Alt Attributes into CSS: After { Content: Image }