1

So I appear to be in a bit of a pickle. I've been googling different things for a couple of hours and not really getting anywhere. I'm currently working on a wordpress theme and trying to use layered fonts for my links. Basically I have a black stroke (outline of the letters) font for my basic links, when they are hovered over I want the text to get filled in with solid red while still maintaining the black stroke on the letters.

Something like this:

enter image description here

I currently have this working for some elements of my wordpress theme using the CSS pseudo selector :after and accessing the elements title value.

Example:

.entry-title a:hover:after {
    font-family: 'fillFont';
    content: attr(title);
    position: absolute;
    top: 0px;
    left: 0px;
}

This works because I can set the title attribute using PHP in the Wordpress template for entry titles etc. But this only applies to certain links generated in Wordpress that have a title attribute. For generic links there is no title attribute that I can parse with PHP (that I know of) so I can't style it with CSS in the same way I have been doing.

The only solution I can think of right now, would be to use Javascript to iterate over the page every time it is loaded and add title attributes for each link element, but I imagine that would cause some pretty severe performance issues.

Does anyone know of any solutions? Or if it's even possible? I'm pretty much open to any suggestions that would achieve the same effect.

ChrisB
  • 2,497
  • 2
  • 24
  • 43
ROGUEDATAPOINT
  • 11
  • 1
  • did you make a case study that revealed "pretty severe performance issues."?why don't you use only the hover pseudoselector and change only the font?? – madalinivascu Oct 21 '16 at 03:58
  • Maybe this might be worth looking into: https://css-tricks.com/examples/TextStroke/. Of course, [leave it to Microsoft](http://caniuse.com/#feat=text-stroke) to not support anything awesome except like 8 years later. – Mike Oct 21 '16 at 04:08
  • If you have already made it possible with a few links, you can do it with other links too. What is the problem? – Mark Wilson Oct 21 '16 at 06:11

1 Answers1

0

Using text shadow:

.demo
{
    font-size: 50px;
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;   
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}

.demo:hover {
  color: red;
}
<div class="demo">
    Example
</div>

Source for this answer :

Outline effect to text

Community
  • 1
  • 1
Mark Wilson
  • 1,324
  • 2
  • 10
  • 19