Attr () of CSS attributes and attr of css attributes

Attr () of CSS attributes and attr of css attributes

Attr () should not be an attribute, but a CSS function. Let's take a look at the introduction on MDN:

Summary
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can be used on pseudo-elements too and, in this case, the value of the attribute on the pseudo-element's originated element is returned.
The attr() function can be used with any CSS property, but support for properties other than content is experimental.

In simple translation, the English level is limited, mainly for the English is worse than me for reference, the experts can ignore:

The CSS function attr () is used to obtain the attribute value of the selected element and use it in the style file. It can also be used in pseudo-class elements and pseudo-class elements to obtain the value of the original pseudo element.
The attr () function can be used with any CSS attribute, but all the functions except content are experimental (in short, unstable, not necessarily supported by browsers ).

How to use it? Let's give you an example. Some time ago, we used the prompt function for the button, that is, after you put the mouse on it, a small prompt is displayed:

<Div class = "wrap"> <a href = "#" class = "btn" data-tip = "click to answer"> a button </a> </div>

.btn {  display: inline-block;  padding: 5px 20px;  border-radius: 4px;  background-color: #6495ed;  color: #fff;  font-size: 14px;  text-decoration: none;  text-align: center;  position: relative;}.btn::before {  content: attr(data-tip);  width: 80px;  padding: 5px 10px;  border-radius: 4px;  background-color: #000;  color: #ccc;  position: absolute;  top: -30px;  left: 50%;  transform: translate(-50%);  text-align: center;  opacity: 0;  transition: all .3s;}.btn::after {  content: '';  border: 8px solid transparent;  border-top: 8px solid #000;  position: absolute;  top: -3px;  left: 50%;  transform: translate(-50%);   opacity: 0;  transition: all .3s;}.btn:hover::before {  top: -40px;  opacity: 1;}.btn:hover::after {  top: -13px;  opacity: 1;}

 

Of course, attr () can also obtain more other attributes, such as the href attribute in the tag. For more usage, try it by yourself.