Skip to content

Instantly share code, notes, and snippets.

@skidvis

skidvis/data_attribute_styling.html

Created January 27, 2017 19:11
Show Gist options
  • Save skidvis/300119e11706c868ec1286bde49bd5b7 to your computer and use it in GitHub Desktop.
Save skidvis/300119e11706c868ec1286bde49bd5b7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data_attribute_styling.html
<!DOCTYPE html>
<html>
<head>
<title>Hi mom</title>
<style type="text/css">
ul{
padding: 0;
width: 500px;
}
li{
border: solid 1px #555;
list-style-type: none;
padding: 5px;
margin: 5px;
}
[data-eyes]:hover{}
[data-eyes]:hover:after{
content: "Eyes: " attr(data-eyes) " - Looks: " attr(data-looks);
float: right;
color: blue;
}
</style>
</head>
<body>
<ul>
<li data-eyes="like a baby cow" data-looks="handsome as all get-out">Skid Vis</li>
<li data-eyes="two" data-looks="he's aaite">Dave</li>
<li data-eyes="mesmerizing" data-looks="red bearded">Zach</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment