Skip to content

Instantly share code, notes, and snippets.

@johnlouie04
Created July 16, 2013 01:37
Show Gist options
  • Save johnlouie04/6005103 to your computer and use it in GitHub Desktop.
Save johnlouie04/6005103 to your computer and use it in GitHub Desktop.
Using content attr of psuedo elements dynamically
<!-- first create a div element -->
<div class="myClass" data-text="put the message here"><!-- You can call the data attr using content attr in css -->
</div>
/* call you class name here */
.myClass {
border-top: 1px solid #e1e1e1;
height: 1px;
display: block;
margin: 15px 0;
position: relative;
text-align: center;
}
/* now create the psuedo element of your class so that we can call the data attr here */
.myClass:after {
content: attr(data-text);/* call the data-text attr here */
color: #c0c0c0;
padding: 10px;
background: #f0f6f6;
display: inline-block;
position: relative;
top: -20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment