Skip to content

Instantly share code, notes, and snippets.

@co0kie

co0kie/SassMeister-input-HTML.html

Last active August 29, 2015 14:21
Show Gist options
  • Save co0kie/268eb2861839ca884176 to your computer and use it in GitHub Desktop.
Save co0kie/268eb2861839ca884176 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<table>
<tr>
<td data-title="<em>clyde</em>">
coraida
</td>
</tr>
</table>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
[data-title]{
position: relative;
&::after{
content: attr(data-title);
position: absolute;
background: #000;
padding: 2px;
width: 200px;
opacity: 0;
transition: 200ms;
color: #fff;
}
&:hover{
&::after{
opacity: 1;
}
}
}
Raw
SassMeister-output.css
[data-title] {
position: relative;
}
[data-title]::after {
content: attr(data-title);
position: absolute;
background: #000;
padding: 2px;
width: 200px;
opacity: 0;
transition: 200ms;
color: #fff;
}
[data-title]:hover::after {
opacity: 1;
}
Raw
SassMeister-rendered.html
<table>
<tr>
<td data-title="<em>clyde</em>">
coraida
</td>
</tr>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment