CSS Content, Attr and Url in the Same Sentence

Css Content, Attr and Url in the same sentence

It's neither a bug nor a mistake. The currently supported syntax (CSS2.1) for content is:

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

I.e.:

• The literal normal, none or inherit

• Or any number of these in succession:

  • a string - "hello"
  • a (constant) URI - url("image.jpg")
  • a counter - counter(section)
  • an attribute - attr(id)
  • open-quote, close-quote, no-open-quote, no-close-quote

The specs don't allow for them to be "nested", they can only follow each other, e.g.:

content: "Photo: " url("../Img/Photo.jpg") attr(id);
/* Which is not what you want */

The current CSS3 drafts don't allow for it either. Possibly - if it's been discussed - because most use cases would have little to do with presentation and more to do with actual content.

How to mix url string & attribute value in CSS content property?

It's not possible to do that, this is the specification, you can't place attr() inside url(), they can only follow each other.

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit


div:before {
    content: url("http://example.com/image.jpg") attr(title);
}

CSS attr() concatenation with url path

It is not possible to create a composite url() value out of two or more strings. On top of the legacy url() value, which isn't even a proper CSS function (see Is there a way to interpolate CSS variables with url()? — which means you can't even do this with custom properties), the proper CSS function version of url() as defined in css-values-3 only accepts a single string.¹

You can concatenate multiple strings in a content declaration, but that is a feature of the content property, not of strings in CSS.

¹ _{Since url() accepts a single string, this does mean that a single attr() can be used as a URL value, also new to css-values-3, as attr(image url)... except browser support is nonexistent.}

Multiple content: attr() values

To concatenate two or more string values in CSS, separate them with whitespace:

.element:before {
    content: attr(class) ' ' attr(data-size);
}

Note that the whitespace between the attr() functions and the quotes is not the same as the whitespace within the quotes. The latter is an actual string containing a space character, which will separate the two attribute values in the output. The whitespace between the three parts is the operator that joins them together.

Pass css ::after content as specific word from class name

In this particular case, you can hack is with some negative text-indent if the prefix is always the same. The code element is using a monospace font so it's easy using ch unit

code::before {
  content: attr(class);
  display:inline-block;
  text-indent:-9ch; /* adjust this based on your real case */
  clip-path:inset(0); /* hide the overflow */
}

<code class="language-css"> some code here </code>
<code class="language-html"> some code here </code>
<code class="language-javascript"> some code here </code>

content: attr(data-original url);

<img class="lazy gd0006" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
<img class="lazy gd0007" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
<img class="lazy gd0008" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
...

@media print {
    .lazy.gd0006 {
        content: url('/images/gd-0006.jpg');
    }
    .lazy.gd0007 {
        content: url('/images/gd-0007.jpg');
    }
    .lazy.gd0008 {
        content: url('/images/gd-0008.jpg');
    }
    ...
}

var attribute = "data-label";var elements = document.querySelectorAll("["+attribute+"]");
for (var i = 0; i < elements.length; i++) {  elements[i].style.content="url("+elements[i].getAttribute(attribute)+")";}

<table>  <tr>    <td data-label="https://i.stack.imgur.com/mRsBv.png?s=328&g=1">      <span>3</span>    </td>  </tr>  <tr>    <td data-label="https://www.gravatar.com/avatar/a42287aaa5cd72c0d29dd65f065e9c51?s=328&d=identicon&r=PG&f=1">      <span>3</span>    </td>  </tr></table>