Css Content, Attr and Url in the same sentence

by

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.

More Related Contents:

  1. Why do the :before and :after pseudo-elements require a ‘content’ property?
  2. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  3. CSS set background-image by data-image attr
  4. Can I have multiple :before pseudo-elements for the same element?
  5. CSS Pseudo Element Counters: can you increment an alphabet letter “a”, “b”, “c”, etc instead of a number?
  6. Can you apply a width to a :before/:after pseudo-element (content:url(image))?
  7. Purpose of *:before, *:after rule without content property
  8. CSS background image URL failing to load
  9. How to modify the css
  10. Space Gap on mobile devices
  11. When to use margin vs padding in CSS [closed]
  12. Prevent body scrolling but allow overlay scrolling
  13. How to vertically align an image inside a div
  14. How to change colour of blue highlight on select box dropdown
  15. Handling a colon in an element ID in a CSS selector [duplicate]
  16. How can I determine what font a browser is actually using to render some text?
  17. Browser Support for CSS Page Numbers
  18. Aligning two divs side-by-side [duplicate]
  19. Chrome Developer Tools: How to find out what is overriding a CSS rule?
  20. How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can’t find font files referenced in the CSS file
  21. Font Awesome 5 unicode
  22. What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container
  23. Split Div Into 2 Columns Using CSS
  24. CSS property value from class name
  25. Why does a grid-area name absent in grid-template-areas create additional tracks?
  26. LESS CSS: abusing the & Operator when nesting?
  27. Why don’t CSS resets use ‘*’ to cover all elements?
  28. Sass @each variable interpolation [duplicate]
  29. @media query not working in mobile. Works fine in Chrome
  30. filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera

Leave a Comment