CODEWITHSUNDEEP
htmlcss
Kacper G.
Kacper G.

Reputation: 692

CSS - Underline, strikethrough and overline (with styles and colors) in one element

I want to get only one <span> with three lines (underline, strikethrough and overline) like this: (That is only example, I want to change it dynamically)

but I can't use few text-decorations in one element like this:

span {
    text-decoration: overline dotted green;
    text-decoration: line-through wavy aqua;
    text-decoration: underline double red;
}

How can I do this using one <span>? Maybe I can use ::after and ::before or another languages like SASS or LESS?
Thanks for help.

Upvotes: 7

Views: 7314

Answers (6)

Aashish Kumar
Aashish Kumar

Reputation: 2879

span1 {
    text-decoration: line-through overline underline dotted green;;
}
span2 {
    text-decoration: line-through overline underline wavy aqua;
}
span3 {
    text-decoration: line-through overline underline double red;
}
<span1>Some text</span1>
<span2>Some text</span2>
<span3>Some text</span3>

Upvotes: 6

Jishnu V S
Jishnu V S

Reputation: 8409

Use display:inline-block and border-top and border-bottom and text-decoration

span{
  display:inline-block;
  border-top:dotted 1px #000;
  border-bottom:thick double red;
  text-decoration: line-through wavy aqua;
}
<span>Some Text</span>

For the first comment 

span{
  display:inline;
  text-decoration: line-through wavy aqua;
  font-size:22px;
  position: relative;
}
span:after {
  position: absolute;
  content: "Some Text";
  left: 0;
  top: 0;
  text-decoration: underline wavy red;
  z-index:-1;
  color:white;
}
	
span:before {
  position: absolute;
  content: "Some Text";
  left: 0;
  top: 0;
  text-decoration: overline wavy black;
  z-index:-1;
  color:white;
}
<span>Some Text</span>

For the last comment

span{
  display:inline;
  text-decoration: line-through wavy aqua;
  font-size:22px;
  position: relative;
}
span:after {
  position: absolute;
  content: "S";
  left: 0;
  top: -100%;
  text-decoration: underline wavy black;
  z-index:-1;
  color:white;
  width: 100%;
  letter-spacing: 1000px;
  overflow: hidden;
}
	
span:before {
  position: absolute;
  content: "S";
  left: 0;
  top: 0;
  text-decoration: underline wavy red;
  z-index:-1;
  color:white;
  width: 100%;
  letter-spacing: 1000px;
  overflow: hidden;
}
<span>Some Text</span>

Upvotes: 6

Malathy Venkatesan
Malathy Venkatesan

Reputation: 213

Hope below code will help you

<!DOCTYPE html>
<html>
<head>
<style>
span1{
    text-decoration: underline;
}
span2{
    text-decoration: line-through;
}
span3{
    text-decoration: overline;
}
</style>
</head>
<body>
<span3><span2><span1>sometext</span1></span2></span3>
</body>
</html>

Upvotes: 3

Maulik
Maulik

Reputation: 785

Example :

span:first-child{
  display:inline-block;
  border-top:dotted 1px #000;
  border-bottom:thick double #ff0000;
  text-decoration: line-through wavy aqua;
}
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>

Upvotes: 0

bdalina
bdalina

Reputation: 523

Try using display block, and borders

span{
  display:inline;
  border-top:dotted 5px #000;
  border-bottom:thick double #ff0000;
  text-decoration: line-through wavy aqua;
  font-size:5rem;
  width: auto;
}
<span>Some Text</span>

Upvotes: 3

Nick De Jaeger
Nick De Jaeger

Reputation: 1249

span {
  display: inline-block;
  text-decoration: line-through overline underline;
  border-width: 1px 2px 3px 4px;
  border-style: solid dashed dotted none;
  border-color: red green blue yellow;
  padding: 10px;
}
<span>Text decoration</span>

Upvotes: 2

Related Questions