How Did CSS 'Content' Property Work for 'Img' Element in Webkit

content attribute of img elements

The content property as defined in CSS 2.1 applies to :before and :after pseudo-elements only. By CSS rules, you can specify any property for any element, but specifications have limitations on what properties “apply to” (i.e., have effect on) various elements.

The CSS3 Generated and Replaced Content Module, a Working Draft, describes the content property as applying to all elements. It has an example of replacing the content of an h1 element by an image, and surely the same could be done to an img element.

But it’s just a Working Draft. The usual resources on CSS implementation status, QuirksMode.org CSS info and Caniuse.com, do not indicate the situation; they only describe the support to content for :before and :after (which is rather universal except IE 7 and earlier.

Accessing 'background-image' css property in webkit browsers

This works fine for me on the Stack Overflow logo using the Chrome console on this page.

For vanilla JS:

var logo = document.getElementById("hlogo").childNodes[1];
getComputedStyle(logo).getPropertyValue('background-image');

For jQuery:

$("#hlogo a").css("backgroundImage")`

For YUI:

// You have to load YUI first.
var logo = document.getElementById("hlogo").childNodes[1];
YAHOO.util.Dom.getStyle(logo, 'background-image');

All return "url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3)".

Getting pseudo-element content in Chrome

This question is quite old but if anyone is looking for a solution, this is how you do it:

window.getComputedStyle(document.querySelector('#element'),':after').getPropertyValue('content')

Property is nonstandard. Avoid using it. for '-webkit-mask-image' & '-webkit-mask-size'. What should I use instead?

Try to change it from -webkit-mask-image / -webkit-mask-size to only mask-image and mask-size and see if that resolves the issue for you.

a.effect-shine:hover {
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    mask-size: 200%;
    animation: shine 1s infinite;
}

You can also just add and define the properties mask-image and mask-size as shown below:

a.effect-shine:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .7) 30%, #000 50%, rgba(0, 0, 0, .7) 70%);
    -webkit-mask-size: 200%;
    mask-size: 200%;
    animation: shine 1s infinite;
}

But that would still give you an error of 'Property is non standard. Avoid using it' but that would remove the red marks. I'd recommend going with the first snippet of code in my answer as these properties 'mask-image' and 'mask-size' are also a standard for browsers such as Safari,Opera, Chrome, Edge and Firefox.

Css --webkit-image-set() syntax doesn't work for Chrome

It's seems that chrome not fully supports image-set

our implementation has not been per the spec, as only URL values were accepted for the image, and only resolutions with 'x' as a unit were accepted.

source

To make it work with chrome try remove the type and add 1x instead

url('https://url.avif') 1x

How to add composite css -webkit-mask-image?

You could achieve that by masking with a SVG.

First you need to create the SVG element and add it to DOM:

 <svg id='svgOverlay' width='100%' height='100%' version='1.1' xmlns='http://www.w3.org/2000/svg' style='position:fixed;top:0;left:0;z-index:100000;'>
    <defs>
      <mask id='mask'>
        <rect x='0' y='0' width='100%' height='100%' fill='white' />
        <rect x='0' y='40' width='200' height='200' fill='black' />
      </mask>
    </defs>
    <g>
      <rect fill='black' width='100%' height='100%' opacity='0.5' mask='url(#mask)' />                
    </g>
  </svg>

To position your mask inside your div adjust the styling on the <svg> tag (either fixed if you need to cover whole page or absolute if you are nesting in a div):

<svg id='svgOverlay' width='100%' height='100%' version='1.1' xmlns='http://www.w3.org/2000/svg' style='position:fixed;top:0;left:0;z-index:100000;'>
...

This part is your transparent area:

...
<rect x='0' y='40' width='200' height='200' fill='black' />
...

Adjust x, y, width and height to fit your needs. The only catch is that if you have selectable content under it, you won't be able to select it by clicking/draging with mouse - if this is not a problem for you it is a rock solid approach.

Here is a working sample (works in chrome, firefox, opera, IE9+ ): http://codepen.io/easwee/pen/gyExz

jquery CSS doesn't work in webkit

When .ready() is fired, the images probably don't have their dimensions set.

0 > 0 is false, so the top property is never set.

Use $(window).load(); instead, or this plugin.

Why is this :after element being affected by line breaks?

The issue is that the line break is white space which makes the floated content drop a line. The issue can be reproduced by adding a single space between the </a> and </li>. Try making the inserted content display:inline-block instead of floated.

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    display:inline-block;
    text-align: center;
    border: rgba(0,0,0,0.25) 1px solid;
    white-space: normal;        
}

Updated JSFiddle.

UPDATE BY OP

Yup, inline-block fixes this, but it's not quite that simple since inline-block has some patchy browser support.

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;

    /* FIX */
    display:-moz-inline-stack; /* For older versions of Firefox */ 
    display:inline-block; /* Anything that supports inline-block */

    /* IE FIX */
    zoom:1;
    *display:inline; 
}