Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Aug 2, 2021
Embed
What would you like to do?
Strike through explanations
<div>
<h1>Strike out explanations</h1>
<p>Semantic, lovely, <del class="removed" title="Actually, on second thoughts, they aren't that hard to use">hard to use,</del> explanations of strikethrough text. I was on a popular website earlier and they had an article full of amended text, but none of it had any description as to why the text was missing.</p>
<p>Editing is the process of selecting and preparing written, visual, audible, and film media used to convey information. The editing process can involve correction, <del class="removed" title="I removed this bit, as it wasn't entirely correct">sausages, baked beans, fried eggs,</del> condensation, organization, and other modifications performed with an intention of producing a correct, consistent, accurate, and complete work.</p>
<p>Colors from <a href='http://flatuicolors.com/'>flatuicolors.com</a></p>
</div>
$(document).ready(function(){
$(".removed").each(function(){
var description = $(this).attr("title");
var element = $("<aside>"+description+"</aside>");
var top = $(this).position().top;
$(this).append(element);
$(element).css('top',top);
$(this).hover(function(){
$(this).data('title', this.title).prop('title', null);
$(this).find("aside").fadeIn('fast');
},function(){
$(this).prop('title', $(this).data('title'));
$(this).find("aside").fadeOut('fast');
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Strike through explanations

I was on a website earlier and a large part of the article I was reading was 'strike-out' text. I really approve of strike out stuff, as it shows what is meant to be seen but either not correct or of interest, but I was frustrated that I couldn't tell why the article had strike outs in it. It was the idea I needed to make this little pen!

A Pen by eightarmshq on CodePen.

License.

@import "compass/css3";
$pri : #2ecc71;
$sec : #34495e;
body{
background:$pri;
color:#fff;
font-family: 'Montserrat', sans-serif;
}
div{
max-width:400px;
margin:0 auto;
position:relative;
}
h1{
}
a{
color:#fff;
text-decoration:none;
font-weight:bold;
&:hover{
color:$sec;
}
}
.removed{
text-decoration:line-through;
color:$sec;
cursor:help;
&:hover{
color:#fff;
}
}
.removed aside{
text-decoration:none;
position:absolute;
padding:0 10px;
left:-215px;
width:200px;
display:none;
color:$sec;
}
.removed aside:after{
content:'';
height:0px;
width:0;
top:3px;
position:absolute;
right:5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent $sec;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment