css - 如何在仅使用 CSS 的字母下获得悬停阴影？

Question

我想复制下面的标志，在一个字母下面添加一个阴影，就像只使用 CSS 一样。

如何在字母两侧溢出 box-shadow ？我宁愿避免在<span class="shadow"></span>我的“悬停”字母之后有额外的内容，但只能使用字母标签/CSS 规则来管理它（参见下面的 HTML）。

注意：我知道jQuery / CSS3 动画阴影效果。

HTML

<span>Pr<span class="text-info">o</span>be</span>

CSS

element.style {
    box-shadow: 0 4px 3px #AAAAAA;
    position: relative;
    top: -3px;
}

Answer 1

使用伪元素（:before和 : after）、 :hover和opacity属性，解决方案如下所示（它可以扩展为带有动画效果opacity）

HTML

<div class="text-effects"><span>Pr<span class="text-info">o</span>be</span></div>

CSS

body {
    font-size: 10em;
    font-family: Arial;
}

div.text-effects {
    text-transform:uppercase;
}

span.text-info {
    position: relative;
    cursor:pointer;
}

.text-info:hover {
    color: #008080;
    bottom: 0.1em;
}

span.text-info:before {
    content: ".";
    color: transparent;
    position: absolute;
    width: 40%;
    box-shadow: 0 5px 4px -4px #303030;
    display: block;
    left: 30%;
    bottom: 1em;
    opacity:0;
}
span.text-info:after {
    content: ".";
    color: transparent;
    position: absolute;
    bottom: 0;
    width: 40%;
    box-shadow: 0 5px 4px -4px #303030;
    display: block;
    left: 30%;
    bottom:0.15em;
    opacity:0;
}

span.text-info:hover:before{
    opacity:1;
}

span.text-info:hover:after{
    opacity:1;
}

Answer 2

技术

• 我不得不使用@Alex Bell 描述的伪元素。
• 但box-shadow我没有使用text-shadow和调整伪元素位置。
• 伪元素文本是ˍaka U+02CD MODIFIER LETTER LOW MACRON( ˍor \u02CD)

最终结果可作为 fiddle获得。

HTML

<div class="text-effects">
    <span>Pr<span class="text-info">o</span>be</span>
</div>

CSS

body {
    font-size: 10em;
    font-family: Arial;
}

div.text-effects {
    text-transform:uppercase;
}

span.text-info {
    position: relative;
    color: #008080;
    bottom: 0.1em;
    width: 1em;
    height: 1em;
}

span.text-info:after {
    bottom: 0.15em;
    color: transparent;
    content: "ˍ";
    display: block;
    font-size: 120px !important;
    height: 1em;
    left: 26%;
    position: absolute;
    text-shadow: 0 0 11px #999;
    width: 1em;
}