Data attributes are all the rage these days and work wonders with JavaScript integration but they can also work well with CSS.
With basically one HTML element you can build something with many dynamic content parts such as:
<div class=”classname” data-city=”Surat" data-hwy=”Valsad"></div>
This gives you one empty div with two data attributes attached holding what could easily be dynamic placeholders. Now the CSS or SCSS.
.classname{
background-image: url(“image.png”);
margin: 1em auto;
position: relative;
&:before, &:after {
text-align: center;
font-size: 0.8em;
position: absolute;
top: 18%;
width: 5em;
line-height: 1.4;
}
&:before {
content: attr(data-city);
left: -5em;
}
&:after {
content: attr(data-hwy);
right: -5em;
}
}
So the big deal here is the :before and :afterselectors in the CSS that use the content of the data attributes. And your end result looks something like this…
No front-end tutorial is finished before talking about IE…
So how does this fancy data attribute stuff work in IE? Luckily they seem to work pretty well in IE8, IE9, and IE10 with the :before and :afterselectors so get to using!
Author
Jayesh Patel
Jayesh Patel is a Professional Web Developer & Designer and the Founder of InCreativeWeb.
As a highly Creative Web/Graphic/UI Designer - Front End / PHP / WordPress / Shopify Developer, with 14+ years of experience, he also provide complete solution from SEO to Digital Marketing. The passion he has for his work, his dedication, and ability to make quick, decisive decisions set him apart from the rest.
His first priority is to create a website with Complete SEO + Speed Up + WordPress Security Code of standards.