Putting html attribute in the output with css?

Question

Is it possible to visually display html attributes which normally only reside in the source code, in the output of html, anchored to the element they are grouped with?

For example, here is some css which visually groups some  tags in rounded rectangles for clarity:

span{
    display:inline-block;
}

span:first-child{
    border:1px solid black;
    border-radius:15px;
    padding:10px;
}
span:last-child{
    border:1px solid black;
    border-radius:15px;
    padding:10px;
}

<span class="complete-sentence">She <span class="verb">loves</span> him a <span>lot</span>.</span>

https://jsfiddle.net/ycpw4tzz/ <-- What happens currently.

Two of the span tags have classes (global attributes) of "subject" and "verb". I want to somehow get the output display to look like this instead of what it does currently.

enter image description here

sure, I just need a working method I don't care what technology is used to achieve it. — Gallaxhar
– Gallaxhar, Commented Apr 9, 2015 at 5:05

Amit Joki · Accepted Answer · 2015-04-09 05:43:09Z

3

First, don't try to use something which wasn't intended for that kind of use. Use data-* attributes instead.

<span data-type="complete-sentence">
    She <span data-type="verb">loves</span> him a <span>lot</span>.
</span>

Now, I've targeted the spans, which have data-type and using content attribute with attr, along with pseudo-selector :before (you can use :after too, if you want) applying style to them.

span[data-type]:before {
   content: attr(data-type) " | ";
}

DEMO (Also note that if you're using :after make it content: " | " attr(data-type);)

Also, user @bryc has provided an example of how you had wanted it in your image example. Do take a look at it here

edited Apr 9, 2015 at 5:43

answered Apr 9, 2015 at 5:05

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Gallaxhar Over a year ago

The visual effect you use is indeed cleaner, but I'm trying to avoid having to hardcode each tag, for example: what if you have She and hundreds of other 's with other tags, hardcoding them all is tedious, it's better if it works for any tag without being defined in the css manually

Amit Joki Over a year ago

@Gallaxhar I've removed the hard coding part.

Gallaxhar Over a year ago

jsfiddle.net/xa3apsdc/3 here is what I mean, it breaks if the parent tag isn't complete-sentence, also complete-sentence itself should be before a | but not sure how to do that since it's the identifier here. currently you'd have to make a new css line for each parent tag

Amit Joki Over a year ago

@Gallaxhar okay. Now, I have targeted only those which have that attribute without affecting others.

Gallaxhar Over a year ago

I'm not sure about the data-type attribute either, instead of "class", because it doesn't seem to allow multiple tags like text

|

Collectives™ on Stack Overflow

Putting html attribute in the output with css?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related