CODEWITHSUNDEEP
csscross-browser
Lester Vargas
Lester Vargas

Reputation: 368

Simulate text decoration color for text decoration line through

I have read that text-decoration-color is not supported for major browser, so my question is the following -- Is there a way yo simulate the text-decoration-color?

Upvotes: 2

Views: 530

Answers (3)

Paulie_D
Paulie_D

Reputation: 115174

Here's a couple of ways.

I prefer the pseudo-element...it's much more controllable and animatable than just a border.

a {
  color: red;
  position: relative;
  text-decoration: none;
}
.border {
  border-bottom: 2px solid green;
}
.pseudo {
  position: relative;
}
.pseudo::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: blue;
}
.anim::after {
  transform: scaleX(0);
  transition: transform .5s ease;
}
.anim:hover::after {
  transform: scaleX(1);
}
.strike::after {
  top: 50%;
}
<a class="border" href="#">I'm decorated</a>

<a class="pseudo" href="#">I'm also decorated</a>

<a class="pseudo anim" href="#">I'm also animated on hover</a>


<a class="pseudo strike" href="#">I'm lined through</a>

Upvotes: 1

Tom M
Tom M

Reputation: 2904

Yes you can, depending on your usecase (if you only have text in a single line) you could use a pseudo-element and position and color it.

html:

<p>Lorem Ipsum <a href="#">Dolor</a> Sit amet</p>

css:

a {
  position: relative;
  text-decoration: none;
}
a:after {
  content: "";
  position: absolute;
  background-color: red;
  height: 1px;
  left: 0;
  right: 0;
  bottom: 0;
}

codepen: http://codepen.io/anon/pen/Myyzwx

however, if the affected element (word-)breaks this will lead to unwanted behaviour

Upvotes: 0

Jacob G
Jacob G

Reputation: 14172

Yes, text-decoration styling does have horrible browser support.

For the different text-decoration values:

text-decoration:underline;:

Simply use a border-bottom instead of text-decoration:

a {
  text-decoration: none;
  border-bottom: 1px solid orange;
}
<a href="http://example.com">Examples</a>

This might not have the exact effect, but quite similar.

text-decoration:overline;:

Simply use a border-top instead of text-decoration:

a {
  text-decoration: none;
  border-top: 1px solid orange;
}
<a href="http://example.com">Examples</a>

text-decoration:line-through;:

Not as simple, for this we have to use pseudo elements:

a {
  text-decoration: none;
  position: relative;
}
a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: orange;
  margin: auto;
}
<a href="http://example.com">Examples</a>
The above aligns the line in the vertical middle of the element. Note that the <a> can only be single lined for this to work.

Upvotes: 2

Related Questions