CODEWITHSUNDEEP
csssassless
arnaudbey
arnaudbey

Reputation: 890

Use current tag name in attribute value when selector is a wildcard

I'm wondering how it would be possible to use the current tag name in the content attribute value using sass.

Something like that :

*:before {
    /* ... */
    content: mytagname
}

I've managed to bypass the problem by adding a data-tag attribute to my tag with his name as value and get it in css like this:

<p data-tag='p'> blablabla </p>

*:before {
    /* ... */
    content: attr(data-tag)
}

Does a way exist to achieve that without the data-tag trick ?

Thank you !

Upvotes: 2

Views: 202

Answers (1)

Huelfe
Huelfe

Reputation: 1836

As I commented you could use a mixin for that:

@mixin tag-before($parent: '') {
  $tags: a abbr acronym address applet area article aside audio b base basefont bdo big blockquote body br button canvas caption center cite code col colgroup datalist dd del dfn div dl dt em embed fieldset figcaption figure font footer form frame frameset head header h1 h2 h3 h4 h5 h6 hr html i iframe img input ins kbd label legend li link main map mark meta meter nav noscript object ol optgroup option p param pre progress q s samp script section select small source span strike strong style sub sup table tbody td textarea tfoot th thead time title tr u ul var video wbr;
  @each $tag in $tags {
    #{$parent} #{$tag}:before {
      content: '#{$tag}';
    }
  }
}

@include tag-before(#content);

This will generate following css:

#content a:before {
  content: "a";
}

#content abbr:before {
  content: "abbr";
}

#content acronym:before {
  content: "acronym";
}

#content address:before {
  content: "address";
}

...

I hope this code will help you.

Upvotes: 1

Related Questions