Can I add HTML markup via CSS classes? [duplicate]

Question

I got a great answer to my question here about showing a "hover tip" when over a particular segment of text (plus other helpful tips).

But then I thought: Rather than writing "Title="Bla bla bla bla" in a gazillion places, is it possible to delegate that to the CSS class, like so:

.billybob
{
    color: lime;
    Title="this is the title for Billy Bob";
}

I have an example of trying that out here, but no joy in Mudville.

Is it possible, or am I stuck with explicitly adding the Title to every place where a class is referenced in HTML?

Well technically you can write content using pseudo-element selectors ::before and ::after and conentproperty but you won't affect existing attributes, just writing text (or images) in the pseudo-element you're defining. Be carefull using this though, CSS are not the place for content just as HTML is not the place for styling... When dealing with a multilingual site you'll soon discover why it's a bad idea. — Laurent S.
– Laurent S., Commented Mar 11, 2015 at 18:26
You can use a pseudo element, but I am not sure I fully understand your question. — cport1
– cport1, Commented Mar 11, 2015 at 18:26
I'd suggest taking a look at this answer, and then using the content property to achieve this via a pseudo element... for example - jsfiddle.net/hs3dok9z — Josh Crozier
– Josh Crozier, Commented Mar 11, 2015 at 18:27
As others have said you can using the the pseudo-element 'content'. The real question is should you.... — tonyedwardspz
– tonyedwardspz, Commented Mar 11, 2015 at 18:32

Brian · Accepted Answer · 2015-03-11 18:27:26Z

3

The closest you can get is using a pseudo element.

.billybob:before {
    content: 'This is a title for Billy Bob';
}

answered Mar 11, 2015 at 18:27

Brian

2,8394 gold badges27 silver badges30 bronze badges

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

2 Comments

Josh Crozier Over a year ago

To supplement your answer.. you could achieve something like this via a pseudo element. (It's based on this answer)

Heretic Monkey Over a year ago

It should be noted that this is not, as the title seems to ask, "HTML markup" - it is text. Also, if you care at all about accessibility, you should be wary of using this to insert important content.

Tushar Gupta · Accepted Answer · 2015-03-11 18:28:41Z

2

Sorry you can't. CSS is a presentation language. It can not be used neither designed to add content (except for :before and :after pseudo element).

You can though achieve it with Jquery as

$('.billybob').attr('title','this is the title for Billy Bob')

answered Mar 11, 2015 at 18:28

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

1 Comment

B. Clay Shannon-B. Crow Raven Over a year ago

I would mark this as the answer, because I like this solution the best, but since I (wrongly, I reckon) asked specifically about how to do it in CSS, I won't (just give it an uptick).

Collectives™ on Stack Overflow

Can I add HTML markup via CSS classes? [duplicate]

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related