Combining Content, Attr, and Url in a single statement

I've been utilizing the content attribute for quite some time now, but today I decided to explore something different. Instead of relying on JS to show an image tooltip, I was curious if it could be done dynamically using CSS.

So I attempted the following:

.TableLine:hover:after{
  content: url("../Img/Photo/"attr(id)".jpg"); 
}

where attr(id) is meant to output the alphanumeric ID (which is also the picture's name).

However, this method didn't produce any results - it simply did not work. It seems like the block wasn't parsing correctly as adding a border or background had no effect either.

Interestingly, when I used just attr(id) on its own without the URL component, everything functioned perfectly. Additionally, replacing attr(id) with the actual picture name also worked flawlessly.

After scouring the web for answers, I couldn't find anything relevant, so here I am. Is this a known bug or simply my mistake? :)

cssurlattrcss-content

Answer №1

It is not a flaw or an error. The supported syntax for content in CSS2.1 is as follows:

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

In other words:

  • The exact values normal, none, or inherit

  • Or any combination of these in order:

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

The specifications do not allow for nesting, only consecutive use, for example:

content: "Photo: " url("../Img/Photo.jpg") attr(id);
/* This is not the desired result */

CSS3 drafts also do not permit this. Perhaps because most scenarios require actual content rather than presentation-related text.

Answer №2

Starting from the W3C Candidate Recommendation on August 28, 2012, there have been updates to the syntax for specifying the type returned by attr().

You can find more information about this update here.

In short, you can now use the following code:

content: attr(id url);

However, it still appears that you're unable to concatenate this with other strings, which can be frustrating.

Despite these changes, it seems that this feature has not yet been implemented widely.

To see the compatibility across browsers, refer to Browser compatibility

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the Relative Positioning of Two div Elements

Can anyone assist me with finding and comparing the positions of two '<div>' tags using an if statement? I stumbled upon a suggestion in my research, which goes like this: var obstacle = $('#obstacle').css('left', &apo ...

jquerycss

Is there a different option to <br /> that allows me to adjust the spacing between lines?

Consider the example below: Line1 <br /> Line2 To create a line break between Line1 and Line2, I have utilized <br />. However, due to lack of cross-browser compatibility in setting the height of br, I am seeking an alternative approach. Any ...

htmlcss

Place a "sticky" button directly below a second "sticky" navigation bar

Within my app file, I have customized components like an appbar and various page elements: const styles = theme => ({ appBar: { width:'100%', }, }); class App extends Component { render() { const {classes} = this.props; ...

cssreactjsmaterial-ui

Achieving Consistent Aspect Ratios with Images in Flexbox Grid

I'm attempting to utilize flexbox for arranging elements in the layout shown below: -- ------ -- | | | | |--| |--| | | | | -- ------ -- Each corner 'box' contains an image with a square aspect ratio of 1:1. The center ...

htmlcssflexbox

I have a desire to use Javascript to control CSS styles

Within the CSS code below, I am seeking to vary the size of a square randomly. This can be achieved using the Math.random() property in Javascript, but I am uncertain how to apply it to define the size in CSS. #square { width: 100px; height: ...

javascriptcss

Implementing a delay between two div elements using jQuery

I have two Divs with the class "sliced", each containing three images with the class "tile". When I animate using jQuery, I am unable to add a delay between the "sliced" classes. However, I have successfully added a delay between the "tile" classes. index ...

javascriptjqueryhtmlcssdelay

Is there a way to have my MUI Typography component display a unique image cursor when hovered over?

After some testing, I found that setting the cursor to cursor: pointer works perfectly fine. However, my goal is to use a custom image as a cursor. The image is saved in both my src and public folders, but I seem to be struggling with the syntax when using ...

javascriptcssreactjsmaterial-ui

Expand a section of the webpage to fill the entire screen

I'm working with some HTML code that looks like this: <header>title</header> <content class="container-fluid"> <div class="row"> <div class="col-sm-3 leftside"> <ul> <li>test</li> ...

htmltwitter-bootstrapcssresponsive-design

Style your index with a Wordpress plugin

I've been attempting to modify a plugin's stylesheet, but I'm having trouble locating the CSS file that contains the necessary styles. Despite Chrome's developer tool indicating that it is styled directly on the index site, I have searc ...

phpcsswordpresspluginsstyles

A collection of items displayed in an unordered format across two columns

I need help creating a list that displays in two columns. One column for odd numbers, the other for even numbers. Here's an example of what I'm trying to achieve: +----------------------------------------------------+ | col- ...

htmlcsstwitter-bootstrapcol

What's the CSS equivalent of Java's window.pack() method?

I'm relatively new to css and I'm attempting to create a border around a <div>. My goal is for the border to be limited to the size of the elements inside the div and adjust dynamically in proportion to any new objects that may appear or di ...

javascripthtmlcss

Incorporating <span> elements into a comma-separated list using Jquery on every other item

When I receive a comma-separated list of items from a database and insert them into a table cell, I want to apply alternating styles to make it easier for users to distinguish between them. For example: foo, bar, mon, key, base, ball I'm looking to ...

javascriptjquerycss

Execute the JS function during the first instance of window scrolling

Currently, I have implemented a typewriter effect on my website that triggers when the user scrolls to a specific section. However, I want this effect to occur only once. Unfortunately, every time the user scrolls again (in any direction), the function is ...

javascriptjquerycssfunction

The menu in IE7 seems to have a mind of its own, appearing and

Having trouble with my menu displaying correctly in IE7. It seems to be a stacking issue: the menu initially appears but disappears once the header image and rest of the page load. I've tried adjusting the z-index values in both the menu and its paren ...

cssstackinternet-explorer-7

I would like a div element to slide up from the bottom of the page

Could someone please assist me in creating a popup div that appears from bottom to top when a specific button is clicked? I would like the div to be fixed without affecting the overall page content. Any help would be greatly appreciated. Thank you! $( ...

javascripthtmljquerycsspopup

Finding the location of an "Apply" button on an Angular HTML page

There is an issue with the positioning of the apply button in the filter bar. Sometimes it displays in the next row instead of alongside the other filters. How can I determine the exact position of this apply button within the HTML page? <div class=&quo ...

htmlcssangularbuttonposition

td:before combined with vertical-align:middle

To achieve a table with square cells, I implemented the following CSS: table { width: 100%; table-layout: fixed; } td { text-align: center; vertical-align: middle; } td:before { content: ''; padding-top: 100%; float: ...

htmlcsshtml-tablevertical-alignment

Utilize Bootstrap to switch between 'collapse' and 'collapse in' depending on the device being used

I have a collapsible panel set to default "expand" (collapse in) and it is working well. However, I would like to make it "collapse" (shrink) for mobile and tablet devices. Is there any built-in feature in Bootstrap that can help me achieve this? <div ...

jqueryhtmlcsstwitter-bootstrap-3

Incorporating Materialize CSS and MaterialUI within a single React Application

Presently, I have a straightforward non-React application built with HTML, Materialize, and JavaScript that I am considering converting to React while also making the switch from MaterializeCss to MaterialUI. However, I am not looking to make this transiti ...

cssreactjsmaterial-uimaterialize

When it comes to choosing between CSS and Angular Animations for supporting animations on both browsers and NativeScript mobile applications, which approach is more effective?

Are angular animations my only option or can I also utilize css animations with native elements on mobile devices? How are css animations from an angular application translated to native mobile, and is this method less effective than angular animations? I ...

cssangularnativescriptnativescript-angularangular-animations