CSS - Using attr() function without ::before and ::after

Question

I want to useattr()function in some span, but I won't use ::after and ::before pseudo-elements. For example:

<span size="36">Text</span>
<style>
    span[size]{
        font-size: attr(size pt);
    }
</style>

Is it possible to do so using CSS or SASS or LESS?

The attr() function can be used with any CSS property, but support for properties other than `content` is experimental. — Dekel, Aug 26 '17 at 19:43
It is only experimental for any property other than `content`, [cf. MDN attr() in CSS](https://developer.mozilla.org/en/docs/Web/CSS/attr) — Vivick, Aug 26 '17 at 19:44
What means "Experimental"? Is it working in Mozilla Firefox? — Kacper G., Aug 26 '17 at 19:46
No. There is not support for `attr()` in other properties than `content` and non-string values: http://caniuse.com/#search=attr() — , Aug 26 '17 at 20:26
What you want are [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) ? — zer00ne, Aug 27 '17 at 03:55
"Experimental" doesn't actually mean anything here. Dekel and Vivick probably meant to say "nonexistent". There *is no* support for level 3 attr() whatsoever. — BoltClock, Aug 27 '17 at 04:48
@zer00ne: No, the asker definitely means attr(). Two different things. — BoltClock, Aug 27 '17 at 04:49
@BoltClock I know, I was suggesting perhaps another means to his objective, but I wasn't totally sure what `(size pt)` was supposed be. — zer00ne, Aug 27 '17 at 07:12
@zer00ne: It's the value of the size attribute from the markup, in points. (Cue "just use span style=...") — BoltClock, Aug 27 '17 at 07:17

Asons · Accepted Answer · 2017-08-26T20:20:54.023

The attr() returns a string and as such the only property it will practically work on as of today is the content property.

In your case it will return the string 36 and will therefore not be properly applied.

Its syntax has an experimental second parameter, <type-or-unit>, where one amongst other should be able to choose the returned value's data type, though no browser support it yet.

A side note, both SASS and LESS compiles into CSS and aren't able extend the CSS into something CSS can't already do.

CSS - Using attr() function without ::before and ::after

1 Answers1