Soulignement factice

index.html

<a class="underline" href="http://www.ffoodd.fr">C&#700;est psychologique</a>

script.js

/*! modernizr 3.2.0 (Custom Build) | MIT *
 * http://modernizr.com/download/?-addtest !*/
!function(n,e,o){function t(n,e){return typeof n===e}function s(){var n,e,o,s,i,a,l;for(var u in f)if(f.hasOwnProperty(u)){if(n=[],e=f[u],e.name&&(n.push(e.name.toLowerCase()),e.options&&e.options.aliases&&e.options.aliases.length))for(o=0;o<e.options.aliases.length;o++)n.push(e.options.aliases[o].toLowerCase());for(s=t(e.fn,"function")?e.fn():e.fn,i=0;i<n.length;i++)a=n[i],l=a.split("."),1===l.length?Modernizr[l[0]]=s:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=s),r.push((s?"":"no-")+l.join("-"))}}function i(n){var e=c.className,o=Modernizr._config.classPrefix||"";if(d&&(e=e.baseVal),Modernizr._config.enableJSClass){var t=new RegExp("(^|\\s)"+o+"no-js(\\s|$)");e=e.replace(t,"$1"+o+"js$2")}Modernizr._config.enableClasses&&(e+=" "+o+n.join(" "+o),d?c.className.baseVal=e:c.className=e)}function a(n,e){if("object"==typeof n)for(var o in n)u(n,o)&&a(o,n[o]);else{n=n.toLowerCase();var t=n.split("."),s=Modernizr[t[0]];if(2==t.length&&(s=s[t[1]]),"undefined"!=typeof s)return Modernizr;e="function"==typeof e?e():e,1==t.length?Modernizr[t[0]]=e:(!Modernizr[t[0]]||Modernizr[t[0]]instanceof Boolean||(Modernizr[t[0]]=new Boolean(Modernizr[t[0]])),Modernizr[t[0]][t[1]]=e),i([(e&&0!=e?"":"no-")+t.join("-")]),Modernizr._trigger(n,e)}return Modernizr}var r=[],f=[],l={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(n,e){var o=this;setTimeout(function(){e(o[n])},0)},addTest:function(n,e,o){f.push({name:n,fn:e,options:o})},addAsyncTest:function(n){f.push({name:null,fn:n})}},Modernizr=function(){};Modernizr.prototype=l,Modernizr=new Modernizr;var u,c=e.documentElement,d="svg"===c.nodeName.toLowerCase();!function(){var n={}.hasOwnProperty;u=t(n,"undefined")||t(n.call,"undefined")?function(n,e){return e in n&&t(n.constructor.prototype[e],"undefined")}:function(e,o){return n.call(e,o)}}(),l._l={},l.on=function(n,e){this._l[n]||(this._l[n]=[]),this._l[n].push(e),Modernizr.hasOwnProperty(n)&&setTimeout(function(){Modernizr._trigger(n,Modernizr[n])},0)},l._trigger=function(n,e){if(this._l[n]){var o=this._l[n];setTimeout(function(){var n,t;for(n=0;n<o.length;n++)(t=o[n])(e)},0),delete this._l[n]}},Modernizr._q.push(function(){l.addTest=a}),s(),i(r),delete l.addTest,delete l.addAsyncTest;for(var p=0;p<Modernizr._q.length;p++)Modernizr._q[p]();n.Modernizr=Modernizr}(window,document);

// Modernizr addTest for high contrast mode
// https://modernizr.com/docs#modernizr-addtest
// Based on Karl Groves & Hans Hillen test
// http://jsfiddle.net/karlgroves/XR8Su/6/
// Determines if document is in High Contrast Mode or not,
// and if user customized colors in his browsers
// Gaël Poupard — ffoodd.fr
Modernizr.addTest("highcontrast", function() {
  var objA = document.createElement("a"),
      strColor;
  objA.style.color = "rgb(31, 41, 59)";
  document.documentElement.appendChild(objA);
  strColor = document.defaultView ? document.defaultView.getComputedStyle(objA, null).color : objA.currentStyle.color;
  strColor = strColor.replace(/ /g, "");
  document.documentElement.removeChild(objA);
  return strColor !== "rgb(31,41,59)";
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

soulignement-factice.markdown

Soulignement factice

A Pen by ffoodd on CodePen.

License.

style.scss

@mixin underline($background: white, $position: 88%) {
  text-decoration: underline;
  
  // @note Check if browser supports text-decoration-skip: ink
  // @see http://caniuse.com/#search=%40support
  // @see https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
  // @see https://developer.mozilla.org/fr/docs/Web/CSS/text-decoration-skip
  // @affected Safari 9
  @supports (text-decoration-skip: ink) {
    text-decoration-skip: ink;
  }
  
  // @note If text-decoration-skip is not supported bu @supports is
  // @see http://caniuse.com/#search=%40support
  @supports not (text-decoration-skip: ink) {
    // @note check if high contrast mode IS NOT activated
    // @note HC mode usually remove CSS backgrounds, wich would break fake underline
    .no-highcontrast  & {
      background: #{$background} 0 #{$position} / 100% .1rem no-repeat content-box content-box;
      background-image:    
        linear-gradient(      
          transparentize($background, .33),  
          transparentize($background, .33)
        ),    
        linear-gradient(      
          currentColor,      
          currentColor    
        ); 
      display: inline;
      text-decoration: none;  
      text-shadow:    
        .05rem 0 0 $background, -.05rem 0 0 $background,    
        .1rem  0 0 $background, -.1rem  0 0 $background,    
        .2rem  0 0 $background, -.2rem  0 0 $background;
      width: auto;

      // For selection
      // https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
      &::-moz-selection {
        background-color: invert($background);
        color: $background;
        text-shadow: none;
      }

      &::selection {
        background-color: invert($background);
        color: $background;
        text-shadow: none;
      }
      
      // @bugfix Needed for Blink to match currentColor in background on hover/focus
      // @see https://bugs.chromium.org/p/chromium/issues/detail?id=595467
      // @affected Chromium, Brave, Vivaldi, Opera, Chrome
      // @author Vincent De Oliveira
      // @see https://twitter.com/iamvdo/status/822130026384592898
      &:hover,
      &:focus { 
        position: relative; 
        z-index: 1;
      }
    } 
  }
}

.underline {
  @include underline();
}

// Démo
a {
  color: #007cc2;
  font: italic 3rem serif;
  
  &:hover,
  &:focus {    
    color: rebeccapurple;
  }
}