How To Get Attribute Value using CSS.

CSS , 0 Comments

In this article, we will learn how to get attribute value using CSS in CSS with some different types of examples.

In sort yes we can get Attribute value in CSS using the attr() property of content in CSS let’s have a look at quick example below

See the Pen get css attribute value in css by Rajnish (@rajnish_rajput) on CodePen.

In the above example, we are getting the data-foo attribute value and appending in that front of paragraph p tag of HTML. As you saw we used the [data-foo]::before selector to select all the data-foo attributes in the page and insert its value before its HTML tag using content: attr(data-foo) " "; and that double quotes is to add a single space in between its tag and the attribute value.

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

mdn

Definition

The attr() is actually a CSS function that is used to retrieve the value of an attribute of the selected element and use it inside the CSS. You can also use it in the Pseudo-elements like ::before, ::after, ::first-line and more. See some simple and quick examples below:

/* Simple usage */
attr(data-count);
attr(title);

/* With type */
attr(src url);
attr(data-count number);
attr(data-width px);

/* With fallback */
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit);
attr(data-something, "default");

type-or-unit and fallback is an exprimental properties those currently not supported saw on 15 November 2019 see the latest Browser compatibility table on mdn

Tool Tip Example

Here is one more example of “get attribute value in css”, we are going to build a simple tooltip step-by-step using it attr() CSS function.

Let’s create the HTML first.

<a href="https://buginit.com/" 
   data-tooltip="This button will take you to the buginit.com where you can learn">
  buginit.com
</a>

Now, get the data-tooltip attribute data using the CSS.

a {
  position: relative;
}
a:hover::after {
  content: attr(data-tooltip);
}

It’s time to fix the position of our tooltip.

a {
  position: relative;
}
a:hover::after {
  content: attr(data-tooltip);
  /* positioned */
  position: absolute;
  top: 20px;
  left: 100
}

It is still looking a little weird, let’s put some style on it to make beautiful.

a {
  position: relative;
}
a:hover::after {
  content: attr(data-tooltip);
  /* positioned */
  position: absolute;
  top: 20px;
  left: 100
  /*  making it little beautiful */
  width: 150px;
  padding: 10px;
  background-color: #00a79d;
  border-radius: 5px;
  color: #fff;
}

Here we go, we have completed it let’s take a look at how it looks like.

See the Pen Pure CSS simple Tool Tip by Rajnish (@rajnish_rajput) on CodePen.

Browser Support

The best part of attr() CSS function is, It is also supported by Internet Explorer 8 :D,

Statement
attr()2IE 8
Edge 12
13.19

That’s all for now, Thanks for reading. Share it with love.

For more about CSS or JavaScript

Spread the love
  • 20
    Shares

Leave a Reply

avatar
  Subscribe  
Notify of