How to use `attr` when not on `content` property [duplicate]


Tags: css

Problem :

This question already has an answer here:

It is possible to get css to use the value of an attribute in the content property (useful in tool-tips, e.g.):

span:hover:after {
  content:attr(tip);
}
<span tip=" and behold my glory">Hover on me</span>

I am attempting to use this to position elements absolutely. The idea being that in my html I specify different x,y positions as data-attributes that the css picks the appropriate attribute using media queries, e.g.:

div {
  width:100px;
  height:100px;
  background:red;
  position:relative;
}

span {
  display:block;
  width:20px;
  height:20px;
  background:blue;
  position:absolute;
  /* SMall screen - show in top corner */
  top: attr(data-sm-x);
  left: attr(data-sm-y);
}
@media (min-width: 768px) {
  span {
    /* MeDium screen - show in middle of parent */
    top: attr(data-md-x);
    left: attr(data-md-y);
  }
}
<div>
  <span data-sm-x="10" data-sm-y="10" data-md-x="50" data-md-y="50"></span>
</div>

The expected result is to have the blue square in the top corner on small screens, and in the middle of the red square on larger screens, but this does not work.

How do I get the attr function to work on non-content properties?



Solution :

Usage in other properties than content is experimental: https://developer.mozilla.org/en/docs/Web/CSS/attr


    CSS Howto..

    How can I use a CSS3 transform on an element without stretching the text inside it?

    How can I insert dynamic text into a div with absolute position?

    How to give css when span tag within double quotes

    GWT - How to create a drop down menu

    How overlay two pictures to another using HTML-CSS?

    How to make transparent arrow? [duplicate]

    How do i get the submenus to show with a small window size?

    How to get right sidebar up on main content on resize of flexible with page?

    How to write regex to extract specific key format and value from CSS file?

    How can I fade in new HTML elements with CSS [duplicate]

    zindex + jquery: How to make my menu appear over the jquery script?

    How to make three DIV align vertical if not enough space horizontal

    How to set the styles on “*” and pseudo states with JavaScript? [closed]

    how to change the background of a css-class by hover a button?

    Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

    How to make text box to overlap with the image?

    How to call css styles in specific page in HTML?

    CSS: how to address Samsung Android browser?

    How to set background url for css files in thymeleaf?

    How can I change this HAML format to normal CSS style?

    How to change colour of Bootstrap scroll spy and why won't my logos resize?

    Thymeleaf: how to use conditionals to add/remove dynamically a CSS class

    how can I use the CSS selector to solve this [duplicate]

    How do I display an empty div tag with CSS?

    How to make Bootstrap navbar brand image larger

    How do you design your CSS?

    How to convert a jQuery fade effect in CSS?

    How would I go about setting a CSS gradient background in JavaScript?

    CSS Dropdown menu: How to make absolute positioned sub nav line up perfectly

    How to use 3-digit color codes rather than 6-digit color codes in CSS?