What happens is that
Global Attribute , it is not an element , or a pseudo element , summarizing it does not exist in the DOM and You can not "access" it to change the style. Can not style anything that is an attribute !
The title is styled by the
user-agent of the Browser and what you can do is just select an element that has a
Global Attribute and use that information to put a style in it. But the attribute style you can not change
Global Attributes are attributes common to all HTML elements; they
can be used on all elements, although attributes do not
effect on some elements.
Global Attribute list still includes:
- data- *
NOTE: Note that you do not style the
ID of an element that is a Global Attribute, which you type is the element that has this
title attribute and how to "replace it":
title global attribute contains text representing advisory
information, related to the element it belongs to.
"The global attribute
title contains text that represents advisory information related to the element it belongs to."
Now see that
aria-label attribute is used to define the string that labels the
current element. Use it in cases where a text label is not visible on
aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen."
Here is the official W3C documentation on WCAG and the
aria and accessibility attributes link
So I believe the best palliative in this case is to use
aria-label to make a "pseudo title" with a pseudo-element as this example.
aria-label="meu title" puts your title, and invokes it in
content: attr(aria-label); of the pseudo element.
OBS: This example is semantic, accessible and works pretty much like
title in use, definition and behavior.
padding: 8px 10px;
<a href="#" aria-label="meu title">meu link com "title"</a>