0

I'm trying to create a list that checks the html for an icon file using attr

li .school-list {
  position: relative;
  display:block;
}

.school-list::before {
    content: attr(icon string,"hello");
    display:block;
    background-repeat: no-repeat;
    background-size: cover;
    width: 10px;
    height:10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Currently I'm just trying to get the value to display in the content but if I use "string" as the value type it fails 100% of the time. What exactly am I doing wrong?

Here is the HTML I'm using right now 

<li icon='helloooo' class='school-list'><a href="https://www.sdbor.edu/administrative-offices/human-resources/Pages/default.aspx">Board of Regents-Pierre/Sioux Falls/ThisTestSpot</a></li>
<li icon='helloooo' class='school-list'><a href="http://www.bhsu.edu/FacultyStaff/HumanResources/tabid/867/Default.aspx">Black Hills State University-Spearfish</a></li>
<li icon='helloooo' class='school-list'><a href="http://dsu.edu/jobs">Dakota State University-Madison</a></li>
<li icon='helloooo' class='school-list'><a href="http://northern.edu/about/departments-and-offices/human-resources">Northern State University-Aberdeen</a></li>
<li icon='helloooo' class='school-list'><a href="http://www.sdsmt.edu/Campus-Services/Human-Resources/">South Dakota School of Mines &amp; Technology-Rapid City</a></li>
<li icon='helloooo' class='school-list'><a href="https://www.sdstate.edu/human-resources">South Dakota State University-Brookings</a></li>
<li icon='helloooo' class='school-list'><a href="http://www.usd.edu/hr/">University of South Dakota-Vermillion</a></li>
Cody
  • 139
  • 9
  • 2
    just use `attr(icon)`. that would just display text though, not an actual icon. – andi Oct 26 '17 at 18:08
  • To demonstrate andi's suggestion: https://jsfiddle.net/2nkjhaqt/1/ – UncaughtTypeError Oct 26 '17 at 18:11
  • I guess I was focussing to much on it being implementable anywhere than in the single spot that I needed it. Any idea why background-image: doesn't work with attr(icon) or attr(icon url)? – Cody Oct 26 '17 at 18:19
  • See: https://stackoverflow.com/questions/26967890/css-set-background-image-by-data-image-attr – UncaughtTypeError Oct 26 '17 at 18:29
  • Thats from over 3 years ago and it references CSS2 not CSS3 – Cody Oct 26 '17 at 18:30
  • 1
    Don't be so quick to dismiss - as far as I'm aware, it still applies today - also there is reference to `attr()` support properties for css 3 from various creditable sources --> https://caniuse.com/#search=css3%20attr **&** https://developer.mozilla.org/en-US/docs/Web/CSS/attr – UncaughtTypeError Oct 26 '17 at 18:43
  • Wasn't dismissing per se, I really expected this to be implemented properly since its been like 3 years since this has been listed on the documentation. Theres nothing I can do sadly though attr doesnt work inside of most css functions apparently. Cool concept but its not yet implementable – Cody Oct 26 '17 at 19:41

0 Answers0