CSS properties of attr ()

attr () Exactly, should not be a property, but a function of CSS, let us first look at the introduction of the MDN:

Summary

The attr () CSS function is used to retrieve the value of a attribute of the selected element and use it in the style Shee T. It can used on pseudo-elements too and, 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 the support for properties and than content is experimental.

Simple translation, English proficiency is limited, mainly to the English than I have poor friends for reference, Master can ignore:

The CSS function attr () is used to get the property value of the selected element and is used in the style file. It can also be used in pseudo-class elements, in pseudo-class elements, and it gets the value of the original element of the pseudo-element.

The attr () function can be used with any CSS property, but in addition to the content, the rest is experimental (simply, unstable, not necessarily supported by the browser).

That specific how to use it, give everyone to raise a chestnut, a period of time just used, to the button to implement the prompt function, is the mouse put up, come out a little hint:

<p class= "wrap" >  <a href= "#" class= "BTN" data-tip= "click to answer" > a button </a></p>

. 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 get more other properties, such as the href attribute in a tag, and so on, let's try it on our own.

More about CSS Properties attr () related articles please follow topic.alibabacloud.com!

