css - 多行标题背景悬停

Question

我在标题上有一个悬停动画，其中下划线转换为标题的高度。使用 :before 并将 height 设置为 3px，然后更改为 100%。

CSS:

h1 {
  position: relative;
  display: inline-block;
  padding: 0 5px;
}

h1:before {
  content: "";
  height: 3px;
  width: 100%;
  background: crimson;
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline;
  -webkit-transition: height 0.25s;
  -moz-transition: height 0.25s;
  -ms-transition: height 0.25s;
  -o-transition: height 0.25s;
  transition: height 0.25s;
  z-index: -1;
}

h1:hover:before {
  background: crimson;
  height: 100%;
}

效果很好，但问题是当标题有多行时，效果更像是“ block 状”背景而不是“包裹”在标题周围。我试图通过添加一个 span 来做到这一点。下划线是可以解决的，但我仍然想不出一种方法来改变 span 上的 height ，就像我对 :before< 所做的一样.

我不确定这是否可行。

CodePen 上的示例:http://codepen.io/semajtwin/pen/htnLy?editors=110

更新

正如 coma 所建议的，添加 span 解决了这个问题。我已经添加了一些 jQuery 来添加 span 以使其有点动态。

$(document).ready(function() {
  // get h1
  var h1 = $('h1');
  // split by spaces
  var h1_text = h1.html().split(' ');

  var h1_text_updated = '';
  // for each word
  for (var i=0; i<h1_text.length; i++) {
    //insert span
    var text = h1_text[i];

    // if not last word, add space
    h1_text_updated += (i < h1_text.length-1) ? '<span>' + text + '&nbsp;</span>' : '<span>' + text + '</span>';
  }

  h1.html(h1_text_updated);
});

不过，我认为添加   看起来不是很好。

Answer 1

尝试将每个单词包装在 span 中以获得正确的高度:

http://jsfiddle.net/coma/19vz9g2y/

<h1>
   <span>Hello</span> <span>World</span>
</h1>

更新

http://jsfiddle.net/coma/19vz9g2y/1/

var apply = function (elements, method) {

    Array
        .prototype
        .forEach
        .call(elements, method);
};

apply(document.getElementsByTagName('h1'), function (h1) {

    h1.innerHTML = h1.innerText.replace(/\S+/g, function (word) {

        return '<span>' + word + '</span>';
    });

    var a = -1;
    var lines = [];

    apply(h1.children, function (span) {

        if (span.offsetTop > a) {

            a = span.offsetTop;
            lines.push(span.innerText);

        } else {

            lines[lines.length - 1] += ' ' + span.innerText;
        }
    });

    h1.innerHTML = '<span>' + lines.join('</span><span>') + '</span>';
});